Videojs: how to display full poster image


To display the poster image, we have three ways:

Method 1: Use attribute poster in video tag:

poster="http://yourweb.com/path/to/poster.jpg"

Method 2: With javascript use

{"poster":"http://yourweb.com/path/to/poster.jpg"}

Method 3: put in data-setup attribute

data-setup='{"poster":"http://yourweb.com/path/to/poster.jpg"}'

But the default of css:

.vjs-poster{
background-size: contain;
}

So, we see the result like the figure below

videojs poster

To fix it, we add the css code:

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

Done, the result we receive:

videojs poster cover

Leave a Reply