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

Recent search terms:

  • videojs event posterImage show
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1827 h7_YS_7eLU-hwvaE3IQcq9Doct6qWGFFcsd2jUl6ql3nLlWsq9RQUBKHe5cbCv3Q 05fba7ef66c0f39b6f8a45c5f95f0fb79cf5de36&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • videojs PosterImage show

Leave a Reply