Select current iframe after event fired

Question

I'm working with Bootstrap 3 modals with Youtube video iframes on them. I implemented a simple javascript function to stop the video when the modal is hidden using this piece of js

$('.music-modal').on('hidden.bs.modal', function () {
    callPlayer('yt-music', 'stopVideo');
});

And the embeded video looks like

<div class="youtube" data-embed="gjMBua_1J4Y" id="yt-music">
 <iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/gjMBua_1J4Y?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1"></iframe>
</div>

This works seamlessly but only with 1 iframe in 1 modal. I have to do a new js function for every video I add, because the callPlayer function I'm using to send messages to Youtube videos only accepts the iframe id as a parameter.

I want to stop the currently playing video when modal event hidden fires. Is possible to capture that, get the iframe in THAT modal by id, and then stop the video with JS?

You missed $(this) wrapping ;) but works like a charm! Only a question: the `(".youtube")[0]` means that only first id that matches youtube class is selected? — Pere, Apr 20 '17 at 14:46
No. It was to get the Dom - same as $(this).attr("I'd") which is clearer — mplungjan, Apr 20 '17 at 15:20

mplungjan · Accepted Answer · 2017-04-20T20:54:41.797

0

This works

callPlayer($(this).find(".youtube").attr("id"), 'stopVideo');

edited Apr 20 '17 at 20:54

answered Apr 20 '17 at 15:21

mplungjan

169,008
28
173
236

score 0 · Answer 2 · answered Apr 25 '17 at 08:19

Came across with a robust solution, using Youtube API and a players array: stop only the currently PLAYING player.

jQuery(".modal").on('hidden.bs.modal', function() {
 $.each(players, function(k, v) {
    if (this.getPlayerState() == YT.PlayerState.PLAYING) {
        this.stopVideo();
    }
 });
});

Select current iframe after event fired

2 Answers2