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>