Суть задачи такая – запустить видео по нажатию на какой-то элемент. Самый простой вариант – нажать кнопку и запустить видео. В своем примере я немного усложню задачу, добавятся лишние стили немного больше кода, но если разобраться в коде и логике, то можно будет легко его упростить или переделать.
Вариант 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;
}
Рабочий пример запуска видео по клику – Нажмите на картинку

Примеров может быть множество. В данном случае рассмотрел удобные для определенной задачи.
Комментарии (3) к “Включить видео с youtube после нажатия на кнопку или элемент”
Aspiral
Может кому надо будет.
Сделал всё как в 1 примере, не работало. При запуске отобразилось ошибку к идентификатору. Решение:
?feature=oembed&autoplay=1
, вместо&autoplay=1
(из 2 примера). Всё заработало.Aspiral
Или
?autoplay=1
Denis Creative
Мой пример рабочий, создал чистый документ, добавил весь код со статьи, все работает.
Внес предложенные вами правки, ничего не работает.