Здравствуйте, пишу программу для видео галереи.
Суть программы...
Есть миниатюры с постерами, постеры подтягиваются с ютуба, и один большой блок с видео, при клике на миниатюру, берется ссылка и передается большому блоку с видео.
Проблема в том что работает только одна ссылка с миниатюр, остальные выдают (ВИДЕО НЕДОСТУПНО), в чем может быть причина?
Код ниже, для большей ясности.
<div class="video-gallery">
<div class="video-gallery__zoom">
<iframe class='video-gallery__video' src="https://www.youtube.com/embed/LgOPBbBUpUo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video-gallery__container">
<div class="video-gallery__item">
<span class="yotube-link">https://youtu.be/LgOPBbBUpUo</span>
</div>
<div class="video-gallery__item">
<span class="yotube-link">https://youtu.be/1Zr-AjDdfrM</span>
</div>
<div class="video-gallery__item">
<span class="yotube-link">https://youtu.be/rJgg00ic1G8</span>
</div>
<div class="video-gallery__item">
<span class="yotube-link">https://youtu.be/cSQmhBjjb1I</span>
</div>
</div>
</div>
.video-gallery
display: flex
.video-gallery__zoom
background-color: #000
width: 50%
margin: 10px
.video-gallery__container
width: 50%
.video-gallery__item
margin: 10px
display: inline-block
width: 46%
height: 170px
background-size: cover
background-repeat: no-repeat
.video-gallery__video, .video-gallery__video-item
width: 100%
height: 100%
.yotube-link
display: none
"use strict";
$(function() {
$(".video-gallery__item").each(function() {
// получаем ссылку
var linkYoutube = $(this).find('.yotube-link').text();
// достаем id видео
var youtubeId = linkYoutube.slice(-11);
console.log(youtubeId);
// YouTube миниатюра получаем по id
$(this).css('background-image', 'url(http://i.ytimg.com/vi/' + youtubeId + '/hqdefault.jpg)');
// Добавляем иконку Play поверх миниатюры, чтобы было похоже на видеоплейер
$(this).append($('<div/>', {'class': 'play'}));
$(this).click(function(){
var iframeSrc = $('.video-gallery__video').attr('src', 'https://www.youtube.com/embed/' + youtubeId + '?autoplay=1&autohide=1');
console.log(iframeSrc)
});
});
});
