Суть задачи такая – запустить видео по нажатию на какой-то элемент. Самый простой вариант – нажать кнопку и запустить видео. В своем примере я немного усложню задачу, добавятся лишние стили немного больше кода, но если разобраться в коде и логике, то можно будет легко его упростить или переделать.
Вариант 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
Успехов!
Денис
Спасибо всё круто работает. Единственный момент. У меня два видео на странице и если я щелкаю любое из них, то ютюб начинает воспроизводится в одновременно в двух окошках и один и тот же ролик. Почему так может быть?
Denis Creative
Так у меня пример, когда на странице одно видео, а если несокльк овидео то нужно просто поменять скрипт, чтобы контейнер с видео выбирался не по классу, а по позиции в DOMе, например, рядом с кавером
Денис
Денис, сможете дописать скрипт за денежку?
Denis Creative
Внес дополнительный код в статью
Денис
Спасибо большое. У меня что-то последний код не заработал. Я сделал проще, создал уникальный класс под каждый видос и сделал дубли кода javascript под каждый класс)))))))))) идеально работает.
Анатолий
Вот мой код немного доработанный.
Можно выводить множество видео на странице меняя Id, а также вместо картинки выводится обложка этого видео.