How to put an image at the top of a video?-CodePudding

I need to put an image at the top of a video like this

This is my code

  <video class = "video-hero" autoplay autoplay muted loop id= "video-hero">
             <img src=Geo-caching.png
      width="140" 
     height="140">
        <source src="//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm">

CodePudding user response：

You can add a poster attribute to your video tag and give it the image you want. <video poster = "Geo-caching.png">

Here is a link you can learn more https://www.w3schools.com/tags/att_poster.asp

CodePudding user response：

This can be done by poster attribute in video tag,

<video controls 
               width="400" 
              height="200" 
              poster=
Geo-caching.png>
            <source src=
"//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm" type="video/mp4">
        </video>

CodePudding user response：

This can be done using the video controls poster attribute. The poster gives you a thumbnail for your video, while the controls attribute allows for the controls to still be present with the image, so that when the video starts, the image disappears. However, a lot of browsers don't support the video tag. In that case, I would use JavaScript with a font-awesome play button to resemble this attribute.

Note: In order for this to work, I had to take the autoplay attribute off your video.

<video controls poster="https://dummyimage.com/700x400/000/fff"   muted loop id= "video-hero">
  <source src="//d17wd0umvxxjds.cloudfront.net/play/Content/videos/loggedout-cache-finds.webm" type="video/mp4">
</video>