Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2019, 14:24
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Видео галерея
Здравствуйте, пишу программу для видео галереи.
Суть программы...
Есть миниатюры с постерами, постеры подтягиваются с ютуба, и один большой блок с видео, при клике на миниатюру, берется ссылка и передается большому блоку с видео.

Проблема в том что работает только одна ссылка с миниатюр, остальные выдают (ВИДЕО НЕДОСТУПНО), в чем может быть причина?

Код ниже, для большей ясности.

<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)
        });
    });
 });
Ответить с цитированием
  #2 (permalink)  
Старый 24.06.2019, 14:43
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Судя по всему проблема связана с авторскими правами, так как некоторые видео работают без проблем.

Возможно есть другая причина данной проблемы?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна видео галерея Jorf jQuery 0 22.04.2017 22:17
Видео без <VIDEO> и FLASH DIGIUS Общие вопросы Javascript 1 25.10.2016 03:34
Видео галерея на jQuery drcrash jQuery 12 29.01.2016 11:16
Видео галерея alexman86 jQuery 7 17.07.2013 13:04
Сайт торент видео онлайн (через браузер). nemo84 Ваши сайты и скрипты 1 18.05.2013 21:07