video.js size to fit div

Question

I have a video in a div with a 40% width. In the html, width="100%" height="auto" makes the video disappear. Setting a specific size in pixels won't fit the div. Leaving the html blank leaves the video the wrong size and with black bars on the sides.

I've tried the suggestions in most other posts, but can't seem to get it to work.

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>

Answer 1

In version 5 of videojs you can use vjs-16-9 vjs-4-3 class on video object,

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

or use fluid option

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

Source: https://coolestguidesontheplanet.com/videodrome/videojs/

Answer 2

You have to use the ugly !important to override the default absolute positionning of the video :

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

This done, the poster image will display after the video, instead of over it, so you have to fix it with :

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Note that it must have the same ratio as the video it you want it to display nicely.

Answer 3

In the HTML of the video tag set the width and height to auto. Then with CSS set the width/height of the video ID to 100%.

Setting the width and height attributes to auto makes the player work just like a div, which has no dimensions by default.