Video JS - poster image cover/contain

Question

VideoJS 4 uses different CSS behaviour from what I was used to for the poster image from what I can see. I've changed background-size CSS 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 the poster to start a video, the poster image seems to go back to "contain" while the video is loading. Is this change being made elsewhere?

The website is http://jamhouse.com.au/.

Thanks in advance!

Answer 1

As you've specified the poster as an attribute on the video element, you actually end up with two poster images - one in the video element itself, and another which video.js creates as a div overlaying the video element. Your CSS applies to the .vjs-poster div only. When you play the video, the video.js poster div is hidden and you briefly see the video element's own differently scaled poster.

If instead of using the poster attribute you specify it as an option in data-setup instead, the video element itself won't create a poster image but you'll still have the stylable video.js poster div.

<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/