Очередь видео youtube как это работает? (гугл поиск не помог решить проблему)Пример сделал на jsfiddle?

Question

[Alex Polyakh]

видео находятся в одной обертке. когда одно открываю, прокручиваю слайдер открываю второе, два видео проигрывают одновременно как так?

https://jsfiddle.net/71hp4nhf/

Answer 1

[Сергей]

начнем с того,
1. твои iframe в твоем фиддле не имеют класса хотя в коде ты пытаешься пробежать по ним через each
2. ты не загрузил в фидл jQuery
3. ты грузишь YT API в onload фидла, а надо в body (настройки js)
====
далее... с чего ты взял что они в одной обертке? каждый плеер имеет свой объект, в твоем фидле так вообще плееры не имеют ссылок на js объекты т.к. подгружены напрямую с YT а не созданы скриптом...

вот набросал тебе фидл на pure js который грузит видео создавая инстансы плееров и ставит видео на паузу если начато воспроизведение другого видео
https://jsfiddle.net/6j4r1qrL/

P.S. вообще не совсем понимаю зачем ты изобретаешь велосипед генеря свою очередь таким странным способом, когда можно использовать YT API
https://developers.google.com/youtube/iframe_api_r...

UPD: по комментам:
тебе надо сгенерить на странице дивы:

<div id="уникальный айди дива" class="iframe-video" width="ширина плеера" height="высота плеера" data-src="код видео (например Glm-VSKszhA)"></div>

после блока с дивами добавь скрипт из фидла

var player;
var players = [];
function onYouTubeIframeAPIReady() {
[].forEach.call(document.getElementsByClassName('iframe-video'), function (el) {
	player = new YT.Player(el.id, {
        height: el.getAttribute('height'),
        width: el.getAttribute('width'),
        videoId: el.getAttribute('data-src'),
        events: {
            'onStateChange': onPlayerSC
        }
    });
    players.push(player);
});
}
function onPlayerSC(e){
if (e.data == 1)
  players.forEach(function(i){
		if (i!=this){
    	i.pauseVideo();
    }
  },e.target)
}

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

P.S. если в data-src дива тебе проще грузить полный URL видео, можно его подрезать регулярным выражением, тогда надо строку
videoId: el.getAttribute('data-src'),
поменять на

videoId: el.getAttribute('data-src').replace(/^.*[\/=]([^\/=]*)/,"$1"),

он сожрет URL как в формате https://www.youtube.com/watch?v=ZpvG6vTLIyM
так и в https://youtu.be/ZpvG6vTLIyM или https://www.youtube.com/embed/ZpvG6vTLIyM

Comments

[Alex Polyakh]

вот как я сделал в html разметке, ничего не работает Бро, скажи пжл где ты указываешь путь видео они у меня разные?

[Сергей]

Александр Полях: в фидле вместо полного пути к видео я использую его айдишник в атрибуте дива data-src

[Alex Polyakh]

а оки я проверю отпишусь тебе!! Спасибо!

[Alex Polyakh]

Ого ты шаришь, сколько у тебя опыта в Веб?

[Сергей]

более 10 лет =)

[Alex Polyakh]

void01: ахах, ты красава. У меня чуть меньше месяцев 8:) скажи пжл закинул себе на сайт, код который ты дал. Как я понял js должен быть вставлен в HTML, если нет ничего не работает. Подскажи пожалуйста, данные видео находится внутри слайдера slick, как управлять высотой и шириной?

[Сергей]

Александр Полях: js как я писал вставлять после нагенеренных дивов. С размерами не подскажу, на живом смотреть надо. можешь например дивам стилями указать ширину и высоту в процентах, а в коде соответственно поменять el.getAttribute('width'), на $(el).width(), и el.getAttribute('height'), на $(el).height(),

[Alex Polyakh]

void01: Бро, давай дружить?) Мне нравиться, с тобой общаться)