stop all videos when a new video is played

Question

I need some help with Youtube API and embeded videos. I want to stop all iframe videos (here i have taken only 3, but there are several videos)running on the current page wh

Answer 1

Good concept, but event.target.a.src doesn't work! Changed it to event.target.getVideoUrl() and it works fine. check it out here

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {
    var temp = event.target.getVideoUrl();
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) {
        if (players[i].getVideoUrl() != temp) players[i].stopVideo();

    }
}

}

http://jsfiddle.net/Y8P7y/82/

Answer 2

Great answer by Coby to a similar question at https://stackoverflow.com/a/13260520/835822

Using an attribute selector you can target any iframe that comes from Youtube and then using jQuery's each you can loop through all of them.

$(function(){
  $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
});

});

Answer 3

You can do something like this...

Give every iframe a class so that it can be identified as an iframe for youtube player. Here I have given "yt_players"

Now you can use the below code...

<script type="text/javascript">
    players = new Array();

    function onYouTubeIframeAPIReady() {
        var temp = $("iframe.yt_players");
        for (var i = 0; i < temp.length; i++) {
            var t = new YT.Player($(temp[i]).attr('id'), {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
            players.push(t);
        }
    }
    onYouTubeIframeAPIReady();

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) {
                if (players[i].a.src != temp) 
                    players[i].stopVideo();
            }
        }
    }
</script>

Have updated the code...This should be of help to you.

See it in here...http://jsfiddle.net/anubhavranjan/Y8P7y/