video.js responsive not working -

video.js responsive not working -

i have been using video.js while , looking responsive solution. saw 4.6 claimed cannot work. , find nil in documentation making responsive. need remain @ 100% of container , maintain aspect ratio. if leave width/height off defaults small. 100% work on width not sure set height. tried utilize css on id of video tag, didn't work.

the daverupert.com method works older version of video.js not work 4.6.

if documented somewhere link helpful or ideas on how else has made video.js 4.6 responsive.

also, loading animation not showing.

this code utilize responsive players.

first add together responsive wrapper

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

i utilize vjs-hd , vjs-sd differentiate between 16:9 , 4:3

then set classes , css 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 frowned upon, reliable when overwriting other css classes.

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

adapted from: http://css-tricks.com/netmag/fluidwidthvideo/article-fluidwidthvideo.php

html5-video video.js