Включить видео с youtube после нажатия на кнопку или элемент

HTML
16.12.2021

Суть задачи такая – запустить видео по нажатию на какой-то элемент. Самый простой вариант – нажать кнопку и запустить видео. В своем примере я немного усложню задачу, добавятся лишние стили немного больше кода, но если разобраться в коде и логике, то можно будет легко его упростить или переделать.

Вариант 1 – Видео в одном блоке, картинка над видео, после нажатия на картинку видео включается, а картинка прячется

Этот вариант удобен тем, что можно в блок с видео загрузить любое видео, любой фрейм.

Код HTML

Есть общий контейнер, внутри видео и над ним картинка.

<div class="f-video-container">
  <div class="f-video-player">
    <iframe title="Replay: New Shepard Mission NS-19 Webcast" width="652" height="367" src="https://www.youtube.com/embed/sR0s-ou5GyM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="f-video-cover">
    <img src="https://denis-creative.com/wp-content/uploads/2021/12/alpha-firefly-aerospace.jpg" width="560" height="315" alt="" class="wp-post-image">
  </div>
</div>

Код Javascript

После нажатия на картинку, изображение пропадает, а к видео-фрейму добавляется атрибут &autoplay=1 и запускается проигрывание видео.

jQuery(document).ready(function ($) {
  (function initPlayVideo() {
    var $videoCover = $(".f-video-cover");
    var $videoPlayerIframe = $(".f-video-player iframe");

    $videoCover.on("click", function () {
      $videoCover.fadeOut();
      $videoPlayerIframe[0].src += "&autoplay=1";
    });
  })();
});

Код CSS

Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины

.f-video-container {
  position: relative;
  display: block;
  width: 560px;
}

.f-video-player {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}

.f-video-player iframe,
.f-video-player object,
.f-video-player embed {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.f-video-cover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

Рабочий пример запуска видео по клику – Нажмите на картинку

Вариант 2 – После нажатия на картинку видео вставляется в блок, а картинка пропадает.

Этот вариант лучше тем, что при загрузке страницы никакие скрипты с yotube не подгружаются, но код самого скрипта становится сложнее, и менее кастомизированным, более шаблонным.

Код HTML

Блок для видео пустой ,в него потом будет загружено видео. Обложка видео .f-video-cover расположена над контейнером для видео.

В коде добавлен дата-атрибут data-video для блока .f-video-cover – это нужно, чтобы шаблонизировать данный код, например, чтобы можно было выводить код видео с помощью какого-нибудь кастомного поля в шаблоне.

<div class="f-video-container">
  <div class="f-video-player"></div>
  <div class="f-video-cover" data-video="sR0s-ou5GyM">
    <img src="https://denis-creative.com/wp-content/uploads/2021/12/alpha-firefly-aerospace.jpg" width="560" height="315" alt="" class="wp-post-image">
  </div>
</div>

Код Javascript

После нажатия на картинку, она пропадает, а в контейнер для видео .f-video-player загружается видео-фрейм.

В скрипте уже прописана заготовка для видео с youtube, в которую только подставляется ID видео

jQuery(document).ready(function ($) {
  (function initPlayVideo() {
    var $videoCover = $(".f-video-cover");
    var $videoPlayer = $(".f-video-player");
    var $videoUrl = $(".f-video-cover").data("video");

    $videoCover.on("click", function () {
      $videoCover.fadeOut();
      $videoPlayer.html(
        '<iframe src="https://www.youtube.com/embed/' +
          $videoUrl +
          '?feature=oembed&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
      );
    });
  })();
});

Код CSS

Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины

.f-video-container {
  position: relative;
  display: block;
  width: 560px;
}

.f-video-player {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}

.f-video-player iframe,
.f-video-player object,
.f-video-player embed {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.f-video-cover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

Рабочий пример запуска видео по клику – Нажмите на картинку

Примеров может быть множество. В данном случае рассмотрел удобные для определенной задачи.

Если на странице должно быть несколько блоков с видео,

тогда нужно немного изменить скрипт, если у вас другая верстка, то подкорректировать этот скрипт под свою верстку, главное – понять логику

jQuery(document).ready(function ($) {
    (function initPlayVideo() {
        $(".f-video-cover").on("click", function () {
            $(this).fadeOut().siblings('.f-video-player').html(
                '<iframe src="https://www.youtube.com/embed/' + $(".f-video-cover").data("video") + '?feature=oembed&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            );
        });
    })();
});

Рекомендую к прочтению:

Комментарии (11) к “Включить видео с youtube после нажатия на кнопку или элемент”

  • Aspiral

    Может кому надо будет.
    Сделал всё как в 1 примере, не работало. При запуске отобразилось ошибку к идентификатору. Решение: ?feature=oembed&autoplay=1, вместо &autoplay=1 (из 2 примера). Всё заработало.

    Ответить

    • Aspiral

      Или ?autoplay=1

      Ответить

    • Denis Creative

      Мой пример рабочий, создал чистый документ, добавил весь код со статьи, все работает.
      Внес предложенные вами правки, ничего не работает.

      Ответить

  • Мария

    Спасибо за статью, очень помогла!

    Ответить

  • Денис

    Спасибо всё круто работает. Единственный момент. У меня два видео на странице и если я щелкаю любое из них, то ютюб начинает воспроизводится в одновременно в двух окошках и один и тот же ролик. Почему так может быть?

    Ответить

    • Denis Creative

      Так у меня пример, когда на странице одно видео, а если несокльк овидео то нужно просто поменять скрипт, чтобы контейнер с видео выбирался не по классу, а по позиции в DOMе, например, рядом с кавером

      Ответить

      • Денис

        Денис, сможете дописать скрипт за денежку?

        Ответить

        • Denis Creative

          Внес дополнительный код в статью

          Ответить

          • Денис

            Спасибо большое. У меня что-то последний код не заработал. Я сделал проще, создал уникальный класс под каждый видос и сделал дубли кода javascript под каждый класс)))))))))) идеально работает.

  • Анатолий

    Вот мой код немного доработанный.
    Можно выводить множество видео на странице меняя Id, а также вместо картинки выводится обложка этого видео.

    <div class="f-video-container">
  <div class="f-video-player"></div>
  <div id="1" class="f-video-cover" data-video="sR0s-ou5GyM">
    <img src="https://img.youtube.com/vi/sR0s-ou5GyM/0.jpg" alt="" width="360" height="115" >
  </div>
</div>


<script>
jQuery(document).ready(function ($) {
    (function initPlayVideo() {
        $(".f-video-cover").on("click", function () {
var clickId = $(this).attr('id');
            $(this).fadeOut().siblings('.f-video-player').html(
                '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + $("#"+clickId).data("video") + '?feature=oembed&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            );
        });
    })();
});
</script>
    Ответить

Оставить комментарий