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%;
}

     <divclass="wrapper"><videoid="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:

<scripttype="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 repetitionfor (var i = 0; i < players.length; i ++) {
        _V_('#' + players[i]).ready(function() {
            resizeVideoJS(this);
        });
    }

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

    // Resize a single playerfunctionresizeVideoJS(player){
        // Get the parent element's actual widthvar 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 repetitionfor (var i = 0; i < players.length; i ++) {
    _V_('#' + players[i]).ready(function() {
        resizeVideoJS(this);
    });
}

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

// Resize a single playerfunctionresizeVideoJS(player){
    // Get the parent element's actual widthvar 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.