How to embed multiple youtube videos on one page of a website?

Question

YouTube

You need to insert several videos from youtube on one page of the site, one video can be inserted (I do it according to the documentation), and when I insert a second video on the page, a frame is displayed for only one, the last video.
id blocks are different - player1 and player2
the script itself:
var tag = document.createElement('script');
tag.src = " https://www.youtube.com/iframe_api ";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var player1;
player1 = new YT.Player('player1', {
videoId: 'here is the id of the first video',
});
vartag = document.createElement('script');
tag.src = " https://www.youtube.com/iframe_api ";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var player2;
player2 = new YT.Player('player2', {
videoId: 'another video id here',
});
}
What did I do wrong?
Only the second video is displayed.

Answer 1

The question is old, but recently I myself needed to do this and the search brought me here. Here is a working version:

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

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 player = [];
    function onYouTubeIframeAPIReady() {
            player[0] = new YT.Player('video0', {
                height: '360',
                width: '640',
                videoId: 'id_video0',
            });
            player[1] = new YT.Player('video1', {
                height: '360',
                width: '640',
                videoId: 'id_video1',
            });
    }

Answer 2

Most likely you just use the same id for containers or something like that. Make sure that each block where you want to embed the video is unique.

Answer 3

I make different blocks:
div id="player1" and
div id="player2"
In the onYouTubeIframeAPIReady function, I also specify different id.
Now I noticed that I have one and the same variable var player in these functions;
Do they need to be specified as well?
I tried different ones, didn't help.

Answer 4

via iframe?