7

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!

Simon Watson
  • 85
  • 1
  • 3
  • 5

4 Answers4

15

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/

misterben
  • 7,455
  • 2
  • 26
  • 47
  • Tried the above and no background is visible. – plugincontainer Sep 10 '16 at 10:21
  • The second answer here: https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself worked for me. – plugincontainer Sep 10 '16 at 11:16
  • A combination: * use poster attribute with a transparent image 1x1 pixels transparent for example. * use data-setup with poster as the answer said * if you want the poster to fill the entire div use vjs-poster class in the video. * override some css classes: `.vjs-poster { background-size: cover!important; object-fit: cover!important; } video[poster] { object-fit: cover; background-color:transparent; } ` – Surt Aug 23 '18 at 14:29
10

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

  video[poster]{
    object-fit: cover;
  }
  .vjs-poster {
    background-size: cover;
    background-position: inherit;
  }
Dan Ochiana
  • 3,340
  • 1
  • 30
  • 28
1

simple 

video{
 object-fit: cover; 
}

worked for me pretty good

Gleb Dolzikov
  • 776
  • 8
  • 13
0

.vjs-poster { background-size: cover !important; }

In case it is not working, try to add the !important tag.

nkzmi
  • 1
  • 2