Cloud

Pause youtube video when another is played

Getting YouTube videos to PAUSE nice with each other

I don’t know if YouTube had in mind for us to put more than one video on a page. It didn’t seem like it when I set out to make one player pause other videos when it was played. By the end I found that YouTube had enough hooks in the player API to make it possible. Barely.
Contributing factor: I was looking to accomplish this with the bare-bones elements without any plug-ins such as “swfobject.” I googled and binged and asked Jeeves but it seemed no one had posted a way of doing this. Hence this blog post. Feel free to use the code below if you need.
viewView Demo | labView Code

In general:

I enabled YouTube’s JavaScript API (shown below in yellow) so that the videos will let me know when they are ready for instructions. When that occurs I tell the videos to report back if their state changes from, oh say, stopped to playing. When that happens it sends a notice for all other videos to check themselves and PAUSE if they are PLAY-ing.

In specific:

There are two keys to making this work that were not obvious in the beginning. The first was that I needed to put a “playerapiid” in the URL to the video to get it to pass it back when it calls the first function (onYouTubePlayerReady). The last function uses this ID to see if it matches any players ID’s that are on the page. For any player that doesn’t match it will check to see if it is playing and then pause it if it is. You can see the “playerapiid” highlighted below in green.
The second issue that I ran into is that the player does not pass it’s ID when it calls the second function (“onStateChange”) so the function that runs needs to first acquire the ID of the player. This is why I said that YouTube barely added enough to make this possible. If the “onStateChange” event would not only pass the STATE of the player but also the ID then I would not need to use a function as the second parameter to acquire the ID.

In scriptcific:

//You will have multiple OBJECTS on your page - I am only showing one here:

<object data=”http://www.youtube.com/v/HnTfX3rmZfM?enablejsapi=1&amp;playerapiid=yt1” id=”yt1″ class=”vid-object” width=”300″ height=”200″ type=”application/x-shockwave-flash”>

<param value=”always” name=”allowScriptAccess“/>

<param value=”http://www.youtube.com/v/HnTfX3rmZfM?enablejsapi=1&amp;playerapiid=yt1” name=”movie”/></object>

<script type=”text/javascript”>//Be sure that jQuery is added to your page

//each player calls this function when it loads

function onYouTubePlayerReady(playerId) {

//get the the playerapiid of the video that calls this function

var player = $(‘#’+playerId)[0];

//add an event-listener to the player to run when the state changes…
//…that passes the player’s ID through to the next function

player.addEventListener(‘onStateChange’,'(function(state){ return playerState(state,”‘+playerId +'”);})’);}
function playerState(state, playerId) {

//continue if the state is 1 (play)

if(state == 1){

//for each player, with the “vid-object” class, get the ID…

$(‘.vid-object’).each(function(){ var thisID = $(this).attr(‘id’), ytplayer1 = document.getElementById(thisID), ytp1State = ytplayer1.getPlayerState();

//if it doesn’t match the video that called this function…

if(ytp1State == 1 && ytplayer1.id != playerId){

//and if it is currently playing

ytplayer1.pauseVideo();

//…then pause it.

}});}}

</script>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Seth Broweleit

More from this Author

Subscribe to the Weekly Blog Digest:

Sign Up
Follow Us
TwitterLinkedinFacebookYoutubeInstagram