How to allow play only one embedded YouTube video on page?

javascript, jquery, video, youtube

Solution

Here's a quick YouTube player manager sketch that you can adapt to your needs. A couple of quick notes:

You can also use the API to programmatically embed each iframe. This example assumes that the iframe elements are already on the page.

If (as with this example) you utilize already embedded players then make sure you append '?enablejsapi=1' to the end of the embed URL.

Essentially this manager keeps track of the registered videos. If it detects that a registered video begins to play it will pause any other registered video that is currently playing.

API Reference: https://developers.google.com/youtube/iframe_api_reference

UPDATE: Changed the example to use pauseVideo vs. stopVideo.

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayerManager = (function YTPlayerManager() {
  var players = [],
      PLAYING = 1;

  function register(id) {
    players.push({
      id: id,
      player: makePlayer(id)
    });
  }

  function makePlayer(id) {
      return new YT.Player(id, {
        events: {
          'onStateChange': function(event) {
            if(event.data == PLAYING) {
              videoPlaying(id);
            }
          }
        }
      });
  }

  function videoPlaying(id) {
    players.forEach(function(item) {
      if(item.id !== id) {
        item.player.pauseVideo();
      }
    });
  }

  return { register };
})();

function onYouTubeIframeAPIReady() {
  ytPlayerManager.register('video1');
  ytPlayerManager.register('video2');
  ytPlayerManager.register('video3');
}

Problem

Original source

Related problems

• Pause YouTube iframe embed when playing another