0

I have a section of a client site that has multiple Vimeo videos that can be launched in Bootstrap modals, so am working on the jQuery needed to automatically play a video when its modal is launched, and pause it when it's modal is closed.

The following code works, but I realize it's not very efficient and have not had any luck trying to get a for loop to work. If someone was able to "teach me how to fish" here, I'll be a heck of a lot more efficient in the future.

var idPlayer0 = new Vimeo.Player('player_0');

jQuery('#modal-0').on('shown.bs.modal', function (e) {
    idPlayer0.play();
});
jQuery('#modal-0').on('hidden.bs.modal', function (e) {
    idPlayer0.pause();
});

// And do it again...

var idPlayer1 = new Vimeo.Player('player_1');

jQuery('#modal-1').on('shown.bs.modal', function (e) {
    idPlayer1.play();
});
jQuery('#modal-1').on('hidden.bs.modal', function (e) {
    idPlayer1.pause();
});

// And so on...

I have tried the following to no avail...

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe');

var idPlayer = [];
for (var i = 0; i <= iframes; i++) {
    idPlayer[i] = new Vimeo.Player('player_' + i);

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

Any help is very appreciated. Thanks!

EDIT

Got this working using the following with help from @ryan and JavaScript closure inside loops – simple practical example. It is not the most robust solution, but it's getting closer.

jQuery( document ).ready(function() {

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe').length;

var idPlayer = [];

for (let i = 0; i < iframes; i++) {

    idPlayer[i] = new Vimeo.Player(document.getElementById("player_"+[i]));

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

});

Community
  • 1
  • 1
user7711898
  • 1
  • 1
  • `i <= iframes;` doesn't make much sense. Have you tried researching this before asking? – 4castle Mar 15 '17 at 00:30
  • Your code is pretty much right, but runs into a bit of a JavaScript gotcha where variables declared with `var` have function scope even if you declare them inside the loop (`var i` here). As 4castle mentions, you should also check if `i < iframes.length`. – Ry- Mar 15 '17 at 00:30
  • @4castle I've spent 2 days working on this, so have researched a ton. I am new to jQuery, though, so may not know the best way to search. I did find the error in i <= iframes, as I forgot to include the .length on the var iframes. Even with that in place, this still does not work. I've gathered that it has to do with using the variables with arrays as objects, but have not been able to find a solution to that either. – user7711898 Mar 15 '17 at 04:04
  • @Ryan Thanks - got that one but still not working. I checked out the question you marked this a dup of...I hadn't run into that one. Ultimately the issue seems to be with using idPlayer[i] as an object...that's what I'm seeing in console at this time...it can't "play" or "pause" something that's undefined. – user7711898 Mar 15 '17 at 04:06
  • The duplicate is exactly the issue you’re running into. `idPlayer[i]` is always `undefined` because `i` is `iframes.length + 1` by the time the loop ends. If you change `var i` to `let i`, it should work, but be aware of the [browser support](http://caniuse.com/#feat=let) and use the workaround described in the duplicate if you need to be compatible with more browsers. – Ry- Mar 15 '17 at 04:10
  • @Ryan - thank you - got it working with your "let" clue. Checking on failure points in other browsers and will also try to get the workarounds in place to keep making this better. – user7711898 Mar 15 '17 at 04:23

0 Answers0