JS video - cover for poster image / contains

Question

VideoJS 4 uses a different CSS behavior from what I used to render the poster from what I see. I changed the CSS size of the background to “cover” instead of “contain,” which means that even if the proportions of my image are wrong, the image will fill the poster div. For some reason, however, when you click on a poster to start a video, the image of the poster seems to return to “contain” while the video is loading. Is this change made elsewhere?

Website http://jamhouse.com.au/ .

Thanks in advance!

Answer 1

As you pointed out the poster as an attribute on the video element, you actually have two images of the poster: one in the video element itself and the other that video.js creates as a div overlaying the video element. Your CSS only applies to div.vjs-poster. When you play a video, the div video.js poster is hidden and you briefly see your own video element in different ways.

If, instead of using the poster attribute, you specify it as an option in the data-setup instead, the video element itself will not create a poster image, but you will still have a stylized video.js poster.

 <video id="showcase" class="video-js vjs-default-skin" controls="controls" preload="none" width="500" height="250" data-setup='{"poster":"http://jamhouse.com.au/media/video/orchlapse.jpg"}'> 

Example: http://jsfiddle.net/tjFyC/

Answer 2

What worked for me is a combination of the previous answers. This will work with both posters:

  video[poster]{ object-fit: cover; } .vjs-poster { background-size: cover; background-position: inherit; }