Несколько Youtube роликов в одном проигрывателе на сайте

На одном из проектов было нужно сделать видеогалерею, как на ютубе, когда справа выбирается видеоролик, и он транслируется в плеере. Если до этого играл другой ролик, то он должен останавливаться.

Данная статья отвечает на следующие популярные вопросы:

Как разместить несколько видео Youtube на странице сайта?
Как на сайте остановить воспроизведение видео ютуб и переключиться на другое?
Как разместить несколько видео в одном ютуб плеере?

Как оказалось, вопрос довольно популярный, но многие решения были, мягко говоря, неоптимальными. Я решил сделать всё на API ютуба, без использования костылей. На проекте был уже подключен jQuery, поэтому минимально задействовал и его.

И вот что получилось:

<script>
      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() {
        player = new YT.Player('video_player', {
          height: '100%',
          width: '100%',
          videoId: 'STARTING_YOUTUBE_VIDEO_ID_HERE'
        });
      }
      function onPlayerReady(event) {
        event.target.playVideo();
      }
            function pauseVideo() {
                player.pauseVideo();
            }
    $(function(){
        $('.click_to_change').click(function(){
            var videoId = $(this).attr('data-videoId');
            player.loadVideoById(videoId, 0, "large");
        });    
    });
</script>

Подключаем апи ютуба, формирует код плеера, а также инициализируем его первым видео по умолчанию (STARTING_YOUTUBE_VIDEO_ID_HERE).

Следующая функция отслеживает клик по элементу с классов click_to_change и ловит значение аттрибута data-videoId, в котором и содержится ID ютуб ролика. В подобных элементах хранятся остальные видео, и затем передает ее ID в API функцию loadVideoById, которая и подгружает в плеер нужный ролик, останавливая воспроизведение предыдущего.

Элемент с нужным нам data атрибутом выглядит так:

<div class="click_to_change" data-videoId="NEED_YOUTUBE_VIDEO_ID_HERE">
<img src="https://i.ytimg.com/vi_webp/NEED_YOUTUBE_VIDEO_ID_HERE/maxresdefault.webp" alt="">
<span>DESCRIPTION VIDEO HERE</span>
</div>

Вероятно, вы обратили внимание, что внутри лежит картинка с обложкой ролика, которая используется на Youtube. Это вам небольшой лайфхак для формирования привычных пользователю обложек роликов.

Вы можете спросить, пройдет ли подобный финт с видео, встроенными через iframe. Увы, нет. До меня на проекте видео тоже было встроено через айфрейм, пришлось всё это добро переписать на API Youtube.

Внедряйте!

Больше полезных материалов в нашем Telegram канале. Вступайте и будем на связи! https://t.me/bf_conversion

FRONTEND