CODEWITHSUNDEEP
javascriptvideoiframeyoutube
Michael Anlauf
Michael Anlauf

Reputation: 23

Pause YouTube video within iFrame Using External Button

I am using this script to stop youtube videos when changing the tab. But it works only for the first video. What did I miss? Alternatively could be a solution to stop any video by clicking.

Regards, Michael

Script I used:

<!--
@Author: Naveen
-->
<iframe id="youtube_player" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>
<br />
<br />
<a id="stop" href="#"><strong>Stop The Video</strong></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#stop').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('#youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});
</script>

Website: www.natashatarasova.de

Upvotes: 2

Views: 3450

Answers (1)

ChrisM
ChrisM

Reputation: 1672

You are only interacting with the first of the elements that are selected by the jQuery selector. This is the meaning of the [0] on the end of $('#youtube_player')[0]

Looking at your site code a quick fix may be to do seperate event handlers for each of the stop tabs.

$('#stop1').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('.youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});


$('#stop2').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('.youtube_player')[1].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});

If you wanted to make this more generic obviously some more work would need to be done. There's various ways of doing this and you could add a data attribute or class to allow you to link your tab link and the particular player you are looking at. Something like this (untested code):

$('.stop').on('click', function() {
    var playeref = $(this).data('playerref');
 $('[data-playerref="'+ playerref + '"')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});

And then you would put matching data-playerref="whatever" on both the stop link and the player (See Selecting element by data attribute )

I also wonder why you are sending the postMessage directly yourself rather than using the YTPlayer javascript object provided by Google? You can see the documentation here: https://developers.google.com/youtube/iframe_api_reference

I imagine that you would find the behaviour more reliable and easier to code with. I believe you could then create a player object for each of your videos and call player.pauseVideo() on the one you want to pause.

Edit: drop in code to stop all videos

Following your comment earlier here is some drop in code that will stop all videos:

//You will probably want to change 'li' to a more specific selector e.g. #navTab
jQuery('li').on('click', function() {
    jQuery('.youtube_player').each(function( index ){
        thisPlayer = jQuery('.youtube_player')[index];
        thisPlayer.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
});

I've tested this and it will work on your site. You will probably want to replace the ('li') selector with something that is more specific.

I wrote this in noConflict style (without the '$') as I noticed that your site used that. This could have been another reason why your script didn't work.

Upvotes: 2

Related Questions