Multiple responsive video.js players

Question

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 unique id), I'm not sure how to make this work.

Here is my dev site I have 3 videos on, http://tweedee.e-mediaresources.info/

Here is the code I have for the player (from Dave Rupert's solution above):

    <script type="text/javascript">
    // Once the video is ready
    _V_('#my_video_1').ready(function(){

        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

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

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });
    </script>

This code works fine for one video, but how do I do multiple ids??? As you can see in my dev site, I just replicated the script above three times (each with a different id) and that only causes the last video to be fluid.

score 2 · Answer 1 · answered Jan 21 '13 at 18:25

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

answered Jan 21 '13 at 18:25

zetoun17

21
1

Yes...this does help with resizing all three players. Any idea though how to consolidate the js though so it's not the same script replicated 3 times (it works, but it's ugly & not efficient)? – Patrick Jan 21 '13 at 20:37

net.uk.sweet · Answer 2 · 2013-01-22T23:06:48.687

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>

score 1 · Answer 3 · edited Jan 16 '14 at 06:56

// 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;

score 0 · Answer 4 · answered Jun 04 '13 at 21:07

0

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.

answered Jun 04 '13 at 21:07

Andrew Howard

2,818
5
33
59

The link gives a 404 now. – montrealist Apr 24 '15 at 01:45

Mostafa Marji · Answer 5 · 2014-03-26T09:47:10.200

-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>

edited Mar 26 '14 at 09:47

answered Mar 25 '14 at 22:21

Mostafa Marji

245
8
19

1

http://coolestguidesontheplanet.com/videodrome/videojs/barebones.php this link will help you – Mostafa Marji Mar 25 '14 at 22:47

Multiple responsive video.js players

5 Answers5

Linked