Solution 1 :

The HTML <video> object has a specific attribute for your use-case: poster. It specifies an image to be shown while playback of your video didn’t start yet.

<div class="gl-bot-left">
    <video controls="" poster="https://picsum.photos/id/1/200/300">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

Edit

I really can’t tell you why it ain’t working on your iOs device but I can offer a nifty workaround.

  • add a HTML <image> with your desired placeholder image right before the <video> tag and group those two inside a <div>.
  • make the image invisible by setting it’s visibility to hidden
  • create an empty 64x64x (or smaller) empty transparent .png and use it as the poster image for the video element. This will make sure it doesn’t display the video’s first frame.
  • finally listen for the loadedMetaData event and inside it’s callback function resize the image to the dimensions of the video and set the image’s opacity to visible
var video = document.querySelector('video');

function metaDataLoaded() {
  var image = document.querySelector('img');
  image.width = video.videoWidth;
  image.height = video.videoHeight;
  image.style.visibility = "visible";
}
.container img {
  position: absolute;
  visibility: hidden;
}

video {
  position: absolute;
}
<div class="gl-bot-left">
  <div class="container">
    <img src="https://picsum.photos/id/2/300/200">
    <video controls="" poster="https://i.imgur.com/A9WPATe.png" onloadedmetadata="metaDataLoaded()">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
  </div>
</div>

Problem :

I display a video on my web page with the following:

<div class="gl-bot-left">
    <video controls="">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

This works fine on the desktop. The video loads and you can see a image of the start. However, on the iphone I get an image of the play button instead of an actual image. When I press it the video starts. Is there a way we can display a image for the video when it’s first loaded?

Comments

Comment posted by DCR

so, that works on the desktop but on the iphone I still get just a grey circle with a white triangle inside representing the play button. When clicked the video plays. How to get the iphone to display an image on video load?

By