video.js responsive not working

Question

I have been using video.js for a while and was looking for a responsive solution. I saw that 4.6 claimed to be so but cannot get to work. And I find nothing in the documentation about making it responsive. I basically just need it to stay at 100% of the container and maintain its aspect ratio. If I leave the width/height off it defaults small. 100% will work on width but not sure what to put for height. Tried to use CSS on the id of the video tag, didn't work.

The daverupert.com method works for the older version of video.js but would not work with 4.6.

If it is documented somewhere a link would be helpful or any ideas on how someone else has made video.js 4.6 responsive.

Also, the loading animation is not showing.

Answer 1

You could add this to the data-setup:

data-setup='{"fluid": true}'

or depending on your video aspect/ratio add the following class to the container which does the same thing:

vjs-16-9

or

vjs-4-3

This codepen is another approach

https://codepen.io/dotdreaming/pen/CnLeD

Answer 2

This is the code I use for all my responsive players.

First add a responsive wrapper

<div class="video-js-responsive-container vjs-hd">
    <video .... standard videojs code ... >
        ... sources ...
    </video>
</div>

I use vjs-hd and vjs-sd to differentiate between 16:9 and 4:3

Then set up the classes and css for it

.video-js-responsive-container.vjs-hd {
    padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
    padding-top: 75%;
}
.video-js-responsive-container {
    width: 100%;
    position: relative;
}
.video-js-responsive-container .video-js {
    height: 100% !important; 
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

I know using !important is frowned upon, but its reliable when overwriting other css classes.

The wrapper class video-js-resonsive-container will automatically size it self to 100% of the parent container while maintaining a height in ratio to the width.

Adapted from: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php