Using jQuery to play/stop YouTube multiple iframe players

Question

I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))

Here is the jsfiddle with what I am talking about: http://jsfiddle.net/iwasrobbed/9Dj8c/3/

So each player starts, but it continues to play even after the div containing it is hidden.

By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.

Code here in case jsfiddle is not available:

<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube.com/player_api');

loadYouTubePlayer = function(playerID) {
  the_player = new YT.Player(playerID, {
    events: { 'onReady': playYouTubeVideo }
  });
};  

unloadYouTubePlayer = function(playerID) {
  // This is the part that's broken
  $(playerID).stopVideo();
}; 

function playYouTubeVideo(event) {
  event.target.playVideo();
}

$('.show_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
            loadYouTubePlayer('the_player'+id);
            $('.stop_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            unloadYouTubePlayer('the_player'+id);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

});
</script>

<div class="hidden_player" data-video-id="0" style="display:none">
    <iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>

    <br/><br/>    

<div class="hidden_player" data-video-id="1" style="display:none">
    <iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>

</body>
</html>

Going for the fullscreen mosaic rickroll, eh? – Justin ᚅᚔᚈᚄᚒᚔ Sep 23 '11 at 16:27 — Justin ᚅᚔᚈᚄᚒᚔ, Sep 23 '11 at 16:27

score 4 · Accepted Answer · edited May 23 '17 at 12:28

4

I have created a function which access framed YouTube videos through the ID of the parent of the iframe (as specified in the YT Frame API), and executes the functions defined at the JS API.

See this answer for the code and a detailled Q&A section.

My code would be implemented in this way:

callPlayer(playerID, "stopVideo");

edited May 23 '17 at 12:28

Community

1
1

answered Sep 23 '11 at 16:32

Rob W

341,306
83
791
678

Thanks Rob! This is a great example to start with! – iwasrobbed Sep 23 '11 at 19:34

Using jQuery to play/stop YouTube multiple iframe players

1 Answers1