Как вставить несколько видеороликов с youtube на одну страницу сайта?

Нужно вставить несколько видео с youtube на одной странице сайта, одно видео получается вставить (делаю по документации), а когда вставляю на страницу второе видео, то отображается фрейм только для одного, последнего видео.
id блоков разные - player1 и player2
сам скрипт:
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: 'тут id первого видео',
});
}
//для второго блока
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 player2;
player2 = new YT.Player('player2', {
videoId: 'тут id другого видео',
});
}
Что я сделал не так?
Отображается только второе видео.
  • Вопрос задан
  • 3687 просмотров
Решения вопроса 1
nuykon
@nuykon
Full Stack Developer
Вопрос старый, но недавно мне самому понадобилось это сделать и поиск меня привел сюда. Вот рабочий вариант:
<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',
            });
    }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
IonDen
@IonDen
JavaScript developer. IonDen.com
Скорее всего у вас просто используются одинаковые id для контейнеров или что-то вроде этого. Проверьте чтобы каждый блок куда вы хотите вставить видео был уникальным.
Ответ написан
Комментировать
@RybinDen Автор вопроса
Блоки разные делаю:
div id="player1" и
div id="player2"
В функции onYouTubeIframeAPIReady указываю тоже разные id.
Сейчас заметил что у меня в этих функциях указана одна и таже переменная var player;
Их тоже нужно разные указывать?
Сделал разные, не помогло.
Ответ написан
noys
@noys
красноглазик
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы