Pause YouTube video within iFrame Using External Button

Question

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

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

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.

Thanks for your response and help. I am not a programmer. Actually i don't won't pause a specific Video. I just wanted stop the current playing video when clicking the tab for the next video. (There will be more then 2 videos (tabs) in the future). Regards, Michael — Michael Anlauf, Apr 12 '16 at 10:50
If you are still interested - I looked at this again, and it was a quick little thing to do, so I wrote a drop in solution that should work on your site. You could probably do with someone to work on these kinds of things. If you ever need some more long term or in depth help with Javascript you can message me and I could offer my services. My email and twitter are in Bio. — ChrisM, Apr 23 '16 at 22:14
Hi ChrisM, thank you so much for your help. I added your code and it works perfect. Since i also help people in forums i like to ask if i can publish your solution with a link to your profile. I would like to take your service for developing future projects. — Michael Anlauf, Apr 25 '16 at 06:57
Sure. That'd be fine :) Make sure that people are aware of the need to specify the selector in the first line of the code. I'll add a comment to that effect. — ChrisM, Apr 27 '16 at 00:44

Pause YouTube video within iFrame Using External Button

1 Answers1