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

Question

[Денис Рыбин]

Нужно вставить несколько видео с 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 другого видео',
});
}
Что я сделал не так?
Отображается только второе видео.

Answer 1

[Сергей Левченко]

Вопрос старый, но недавно мне самому понадобилось это сделать и поиск меня привел сюда. Вот рабочий вариант:

<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

[Денис Инешин]

Скорее всего у вас просто используются одинаковые id для контейнеров или что-то вроде этого. Проверьте чтобы каждый блок куда вы хотите вставить видео был уникальным.

Answer 3

[Денис Рыбин]

Блоки разные делаю:
div id="player1" и
div id="player2"
В функции onYouTubeIframeAPIReady указываю тоже разные id.
Сейчас заметил что у меня в этих функциях указана одна и таже переменная var player;
Их тоже нужно разные указывать?
Сделал разные, не помогло.

Comments

[CapeRatel]

У тебя должен быть в переменной массив. Если ты через 1 гоняешь скорее всего там не перезаписываешь. И индивидуально мое мнение что юзать для таких вещей id это плохо. Используй класс, а лучше дата атрибуты

[Денис Рыбин]

CapeRatel: мне бы хотя бы с id, с javascript не дружу.

[CapeRatel]

Денис Рыбин: а чем вы занимаетесь если не секрет

[Денис Рыбин]

CapeRatel: php, на yii 2 сейчас делаю сайт, вот попросили вставить видео, одно без проблем получается, но нужно чтобы было 2 видео.

[CapeRatel]

Денис Рыбин: Очень интересно. Работать на пхп да и еще фрейм. И незнать выборку в js. Сразу пришли на php работать?

[Денис Рыбин]

CapeRatel: да, сначала на чистом, потом smarty, kohana, laravel,сейчас yii.

Answer 4

[noys]

через iframe?

Comments

[Денис Рыбин]

Проблема не через что выводить, а в том как это сделать.

[noys]

тынц alferyevo.ru/video.html

[Денис Рыбин]

noys: убрал у себя скрипты, сделал как там iframe, вобще ничего не отображается.

[noys]

как видите на сайте все работает, так что грабли где-то у вас.

[noys]

вуаля jsfiddle.net/noys/g9nxhezd/1

[noys]

напишите мне на почту - я вам отправил месседж, поглядим вместе может, но разве только в ближайший час.

[Денис Рыбин]

noys: ничего особого
..информация сайта
...

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 другого видео',
});
}

[noys]

а оно тебе вообще зачем? без этого видео не вставить? на alferyevo.ru никаких джаваскриптов подобных нет.