dns-daniel
6/9/2018 - 10:42 PM

Javascript YouTube Video Player (Multiple)

Javascript YouTube Video Player (Multiple) - the muting before playing was a workaround for known mobile issue, didn't seem to work but have left it, may be carrier and/or device specific

// Load the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// the YouTube player, after the API code downloads
var player;
var player2;
function onYouTubeIframeAPIReady() {
  player1 = new YT.Player('ytplayer1', {
    height: '270',
    width: '480',
    playerVars: {
          autoplay: 1,
          loop: 1,
          controls: 0,
          allowfullscreen: 0,
          rel: 0,
          showinfo: 0
      },
    events: {
      onStateChange:
      function(e) {
          if (e.data === YT.PlayerState.ENDED) {
              player1.mute();
              player1.playVideo();
          }
      }
    },
    videoId: 'VRbYVLTouUA'
  });
  player2 = new YT.Player('ytplayer2', {
    height: '270',
    width: '480',
    playerVars: {
          autoplay: 1,
          loop: 1,
          controls: 0,
          allowfullscreen: 0,
          rel: 0,
          showinfo: 0
      },
    events: {
      onStateChange:
      function(e) {
          if (e.data === YT.PlayerState.ENDED) {
              player2.mute();
              player2.playVideo();
          }
      }
    },
    videoId: 'ivX8aM9Q0SE'
  });
}
function onPlayerReady(event) {
    player1.mute();
    player2.mute();
    player1.playVideo();
    player2.playVideo();
}