Load two YouTube videos with onYouTubeIframeAPIReady()

Question

I am loading a YT video with JS into a div JS:

function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'pDMwa1NYceY',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}

HTML:

<div id="video1"></div>

That works, but now I want to load another video into a second DIV on the same page

HTML:

<div id="video1"></div>
<div id="video2"></div>

JS:

function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'XFmRL-Vuwtc',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
player = new YT.Player('video2', {
width: 600,
height: 400,
videoId: 'fQsHVCDn-bs',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}

How do I make this work?

Why am I doing this? I want to control two YouTube videos simultaniourly with JS.

You have to modify: 1) the `player` variable should be different for your `video2`. 2) it's not clear if you want play and pause all YouTube videos with JS at the same time, For the latter, I had added an answer. — Mauricio Arias Olave, Jan 11 '19 at 17:19

Mauricio Arias Olave · Answer 1 · 2019-01-25T22:49:41.710

First, you should have a different variable for each one of the iframes you intend to apply. That means, if you want have two YouTube iframes, you'll have to add two variables.

The next example shows two YouTube iframes (each one with different videos) and two buttons: "resume" and "pause".

You'll have to test in your own enviroment because it seems the code-snippet doesn't allow load the YouTube iframe API and I couldn't so far make a completely functional jsfiddle, but this code will give you a hint about how I manage the "control" of the two YouTube loaded iframes:

/*
 Sources:
 https://developers.google.com/youtube/iframe_api_reference?hl=es-419
 https://stackoverflow.com/a/17843719/4092887
 https://stackoverflow.com/a/11284045/4092887
 https://stackoverflow.com/a/17857716/4092887
*/

var tag = document.createElement('script');

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

// Variables of the divs (where the YouTube iframe will load):
var player;
var multip;

function onYouTubeIframeAPIReady() {

  // Div player:
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady
    }
  });

  // Div "multip":
  multip = new YT.Player('multip', {
    height: '360',
    width: '640',
    videoId: '7gwO8-oqwFw',
    events: {
      'onReady': onPlayerReady2
    }
  });

  // Add onclick events to HTML anchor controls for play and 
  // pause the videos.
  document.getElementById('resume').onclick = function() {
    play_video();
  };
  document.getElementById('pause').onclick = function() {
    pause_video();
  };
}

// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

// Div "multip" - The API will call this function when the video player is ready.
function onPlayerReady2(event) {
  event.target.playVideo();
}

// Function for play all the loaded iframes: those div are: ("player" and "multip").
function play_video() {
  player.playVideo();
  multip.playVideo();
}


// Function for pause all the loaded iframes: those div are: ("player" and "multip").
function pause_video() {
  player.pauseVideo();
  multip.pauseVideo();
}

// Function for reset (start at 0:00) all the loaded iframes: those div are: ("player" and "multip").
function reset_video() {
  player.stopVideo();
  multip.stopVideo();
}

<script src="https://www.youtube.com/iframe_api"></script>
<!-- These divs will contain the iframe YouTube player: -->
<div id="player"></div>
<div id="multip"></div>

<a href="#" id="pause">Pause</a>
<a href="#" id="resume">Resume</a>

score 0 · Answer 2 · answered Dec 22 '20 at 11:46

This trick seems to be working for me. If you are working on section featured videos this migth work

<div id="DIV ID" class="youtube-videos" data-id="YOUTUBE ID"></div>
<div id="DIV ID2" class="youtube-videos" data-id="YOUTUBE ID2"></div>

var all_IDs = [];
$('div.youtube-videos').each(function(){
   all_IDs.push($(this).data('id')+":"+$(this).attr('id'));
});
    
var player = [],
time_update_interval = 0;
    
function onYouTubeIframeAPIReady() {
        for (i = 0; i < all_IDs.length; ++i) {
           var init_i = all_IDs[i];
           var all_data = init_i.split(':');
           console.log(all_data[1]+" --- "+all_data[0]);
           player[i] = new YT.Player(all_data[1], {
              width: 600,
              height: 400,
              videoId: all_data[0],
              playerVars: {
                  'autoplay': 0,
                  color: 'white',
                  rel: 0,
                  showinfo: 0,
                  ecver: 2
              }
          }); 
        }
      
}

Load two YouTube videos with onYouTubeIframeAPIReady()

2 Answers2