Включить видео с 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;
}

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

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

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

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