Включить видео с youtube после нажатия на кнопку или элемент
Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант — нажать кнопку и запустить видео. В своем примере я немного усложню задачу, добавятся лишние стили немного больше кода, но если разобраться в коде и логике, то можно будет легко его упростить или переделать.
Вариант 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>'
);
});
})();
});
В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…
Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…
Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…
Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets…
15 комментариев
Ответить
Может кому надо будет.
Сделал всё как в 1 примере, не работало. При запуске отобразилось ошибку к идентификатору. Решение:
?feature=oembed&autoplay=1, вместо&autoplay=1(из 2 примера). Всё заработало.Или
?autoplay=1Мой пример рабочий, создал чистый документ, добавил весь код со статьи, все работает.
Внес предложенные вами правки, ничего не работает.
Огромное спасибо! Я искал рабочий вариант два дня и нашел его благодаря вам!
Успехов!
Спасибо за статью, очень помогла!
Успехов!
Спасибо всё круто работает. Единственный момент. У меня два видео на странице и если я щелкаю любое из них, то ютюб начинает воспроизводится в одновременно в двух окошках и один и тот же ролик. Почему так может быть?
Так у меня пример, когда на странице одно видео, а если несокльк овидео то нужно просто поменять скрипт, чтобы контейнер с видео выбирался не по классу, а по позиции в DOMе, например, рядом с кавером
Денис, сможете дописать скрипт за денежку?
Внес дополнительный код в статью
Спасибо большое. У меня что-то последний код не заработал. Я сделал проще, создал уникальный класс под каждый видос и сделал дубли кода 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>Цей код працює найкраще.
проблема, после того как поставил видео на паузу, нажимаю в браузере назад и не возвращает на предидущую страницу а видео начинается заново