Видео галерея
Здравствуйте, пишу программу для видео галереи.
Суть программы... Есть миниатюры с постерами, постеры подтягиваются с ютуба, и один большой блок с видео, при клике на миниатюру, берется ссылка и передается большому блоку с видео. Проблема в том что работает только одна ссылка с миниатюр, остальные выдают (ВИДЕО НЕДОСТУПНО), в чем может быть причина? Код ниже, для большей ясности.
<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)
});
});
});
|
Судя по всему проблема связана с авторскими правами, так как некоторые видео работают без проблем.
Возможно есть другая причина данной проблемы? |
| Часовой пояс GMT +3, время: 10:10. |