Multiple Responsive Video.js Players

I'm using this solution, http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/, to make the videojs player fluid. My problem is when I have multiple videos (each with a uni

Solution 1:

you can use css rather than javascript :

.wrapper {
    width: 100%;
}  

.video-js {
    padding-top: 55.25%;
}

     <div class="wrapper">                                 
      <video id="video-player" width="auto" height="auto" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}">                                         
       </video>                                 
     </div>

Solution 2:

you overwrite window.onresize() each time, so only the last one is used. replace

window.onresize = resizeVideoJS 

with :

 window.addEventListener("resize", resizeVideoJS, false); // all browsers except IE before version 9

Solution 3:

The following works. It does involve a bit of repetition, which I think you might be able to avoid if you used something like jQuery's deferred object to wait until the ready event is fired for all of the video players, but it's a lot neater than duplicating the resize method as you're currently doing:

<script type="text/javascript">

    var players = ['my_video_1', 'my_video_2', 'my_video_3'];
    var aspectRatio = 9/16;

    // Catch each of the player's ready events and resize them individually
    // jQuery deferred might be a neater way to wait for ready on all components to load and avoid a bit of repetition
    for (var i = 0; i < players.length; i ++) {
        _V_('#' + players[i]).ready(function() {
            resizeVideoJS(this);
        });
    }

    // Loop through all the players and resize them 
    function resizeVideos() {
        for (var i = 0; i < players.length; i ++) {
            var player = _V_('#' + players[i]);
            resizeVideoJS(player);
        }           
    }

    // Resize a single player
    function resizeVideoJS(player){
        // Get the parent element's actual width
        var width = document.getElementById(player.id).parentElement.offsetWidth;
        // Set width to fill parent element, Set height
        player.width(width).height( width * aspectRatio );
    }

    window.onresize = resizeVideos;

</script>

Solution 4:

// jQuery deferred might be a neater way to wait for ready 
// on all components to load and avoid a bit of repetition
for (var i = 0; i < players.length; i ++) {
    _V_('#' + players[i]).ready(function() {
        resizeVideoJS(this);
    });
}

// Loop through all the players and resize them 
function resizeVideos() {
    for (var i = 0; i < players.length; i ++) {
        var player = _V_('#' + players[i]);
        resizeVideoJS(player);
    }           
}

// Resize a single player
function resizeVideoJS(player){
    // Get the parent element's actual width
    var width = document.getElementById(player.id).parentElement.offsetWidth;
    // Set width to fill parent element, Set height
    player.width(width).height( width * aspectRatio );
}

window.onresize = resizeVideos;

Solution 5:

I have slightly modified net.uk.sweet's very helpful answer above into a working script which deals with multiple video players using video js - which are also responsive. You can find my article (which also shows an example) here = http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html

This also includes a provided callback function if you require it.