Make HTML5 Video Poster Be Same Size as Video Itself

Make HTML5 video poster be same size as video itself

You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img> tag (example).

It is also possible to set background-size to 100% 100% in browsers that support background-size (example).

---

Update

A better way to do this would be to use the object-fit CSS property as @Lars Ericsson suggests.

Use

object-fit: cover;

if you don't want to display those parts of the image that don't fit the video's aspect ratio, and

object-fit: fill;

to stretch the image to fit your video's aspect ratio

Example

How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?

This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).

Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.

e.g.

<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

and

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

I wrote a bit more about it at HTML5 Video and Background Images.

HTML5 video size vs poster size is wrong in Chrome

Ok so, if anyone ever comes here, I finally found the answer to this.

The reason why Chrome was showing a bigger/blurry video is that the mp4 version of it was not in a standard 16:9 format, but not too far from it, so it was kind of stretching it a bit.

Actually, part of the blame is on Miro Video Converter, because when I tried using FFmpeg to convert my original mov to the mp4 format, FFmpeg would not let me do it, explicitly telling me that "the width of the video can not be divided by 16".

All in all, changing the format of the original video to a standard 16:9 format solved the problem.

Why does the video player's size change when I add a poster image?

The intrinsic size of the <video> element is determined by its current frame.

When the image from the poster attribute is displayed, this "current frame" is the poster frame. So the poster frame is what determines the <video>'s intrinsic size.

In the absence of an other rule setting the video size (e.g the width or height attributes or CSS rules), this intrinsic size is what sets the display size of the element.

HTML5 Video / End of a Video Poster

In short: what you need is to add video.addEventListener('ended',function() {}) and trigger video.load() in your custom JavaScript.

Here is a related post that redirects after video is played, you may modify it accordingly - Redirect html5 video after play.

References to look for detailed information:

• Everything you need to know about HTML5 video and audio
• Media events to which you can bind
• HTML5 Video Events and API
• MSDN - Using HTML5 video events

HTML5 video size changes when loading another source

If all you want is really to avoid the width/height to return to defaults (300 x 150) when the next video is loading, you just have to set your <video>'s widthand height properties to the ones of the loaded video (videoWidth and videoHeight are the real values of the media, not the ones of the element).

// fix the element's width and height properties to the current video ones$("#video").on('loadedmetadata', function() {  this.width = this.videoWidth;  this.height = this.videoHeight;});
$("#loadOther").click(function() {  $("#videoSource").attr("src", "http://www.w3schools.com/html/mov_bbb.mp4");  $("#video")[0].load();});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><video preload="metadata" autoplay poster="data:image/gif,AAAA" class="preview-video" id="video" style="border: 5px red solid;">  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="videoSource">    Your browser does not support the video tag.</video><br /><br /><button id="loadOther">Next Video</button>

---

Related Topics