How to display multiple YouTube videos without ove

Question

I have a page with a few YouTube video embed codes. When a user clicks "> play" on one video every other video on the page needs to pause otherwise their audio overlaps the new one just played.

What's the most efficient way of implementing this?

Answer 1

Alright here is a solution I came up with following some code from a few others.

In your .js file add the following:

var videos = {};

$(document).ready(function(){
  // assigns ids to all the embed tags
  var i = 0;
  $('embed').each(function() {
    $(this).attr('id', "embed"+i);
    i++
  });
});

function onYouTubePlayerReady(playerId) {

  // loop through all embed tags assign a listener object only if not already assigned
  $('embed').each(function() {
    var embedid = $(this).attr('id');
    var ytplayer = document.getElementById(embedid);
    if (videos[embedid] == undefined) {
        window["dynamicYouTubeEventHandler" + embedid] = function(state) { onytplayerStateChange(state, embedid); }
        ytplayer.addEventListener("onStateChange", "dynamicYouTubeEventHandler"+embedid);
    }
    videos[embedid] = true;
  });
}

function onytplayerStateChange(newState, playerId) {
    // If one of the videos was played
    if (newState == 1) {
        // loop through each of the embed tags
        $('embed').each(function() {
            var embedid = $(this).attr('id');
            var ytplayer = document.getElementById(embedid);
            // Only pause video if not the current player
            if(embedid != playerId) {
                var current_state = ytplayer.getPlayerState();
                // Only pause if not already started
                if (current_state != '-1') {    ytplayer.pauseVideo();  }
            }
        });
    }
}

Then in your html file, embed your youtube like so. Make sure you have enablejsapi=1 is at the end of the url to the YouTube file:

<object width="500" height="400">
    <param name="movie" value="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true">
</object>


<object width="500" height="400"><param name="movie" value="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true">
</object>