Сложность
Описание
Скрываем, изменяем кнопку play, у встроенного на сайт youtube видео. На нативном JavaScript.
В сети видел только варианты решения, где видео полностью перекрывается картинкой сверху, тем самым закрывается стандартная кнопка. Далее, на новую картинку, сверху добавляется своя стилизовання кнопка.
В данном решении, видео ничем не перекрывается, стандартная кнопка убирается с помощью CSS. Сверху идет прозрачный фон и стилизованная кнопка. Данное решение мне кажется лучше, т.к. не нужно загружать дополнительные картинки.
HTML часть
Мы будем делать адаптивное видео, поэтому у нас получается две обертки. Мы не пишем в HTML тег iframe, вместо него мы создаем обычный div
с уникальным id(video-youtube__content), в последующем, с помощью JavaScript, из данного блока мы получим iframe.
<div class="wrapper">
<!-- begin Video Youtube
=========================================================================== -->
<div class="video-youtube video-youtube_overlay">
<div id="video-youtube__content" class="video-youtube__content video-youtube__content_hide-origin-play-btn"></div>
<button type="button" class="video-youtube__new-play-btn"></button>
</div>
<!-- end Video Youtube
=========================================================================== -->
</div>
CSS часть
Пишем стандартные стили для адаптивности видео. Как сделать видео с youtube адаптивным, это отдельная тема, и здесь не буду об этом писать. Добавлен класс video-youtube_overlay, это прозрачный фон, чтобы видео запускалось только при клике на кнопку старта.
Обычными методами невозможно(или просто мне неизвестно?) скрыть стандартную красную кнопку play у плеера, для этого используется CSS трюк, его можно увидеть в CSS, у класса video-youtube__content_hide-origin-play-btn. Если этого не сделать, тогда под нашей стилизованной кнопкой будет видна стандартная красная кнопка.
.hidden {
display: none !important;
}
.wrapper {
max-width: 560px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* -------------------------------------------------------------------------
begin Video Youtube
* ------------------------------------------------------------------------- */
.video-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-youtube.video-youtube_overlay:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: transparent;
width: 100%;
height: 100%;
display: block;
z-index: 5;
}
.video-youtube .video-youtube__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-youtube .video-youtube__content.video-youtube__content_hide-origin-play-btn {
width: 10000%;
height: 10000%;
-webkit-transform: scale(0.01);
transform: scale(0.01);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.video-youtube .video-youtube__content.video-youtube__content_hide-origin-play-btn::-moz-selection {
background-color: transparent;
}
.video-youtube .video-youtube__content.video-youtube__content_hide-origin-play-btn::selection {
background-color: transparent;
}
.video-youtube .video-youtube__new-play-btn {
max-width: 153px;
max-height: 153px;
width: 100%;
height: 100%;
border: none;
background-color: transparent;
background-image: url(https://erweb.ru/wp-content/uploads/2017/09/youtube-play.png);
background-size: contain;
background-repeat: no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
cursor: pointer;
}
/* -------------------------------------------------------------------------
end Video Youtube
* ------------------------------------------------------------------------- */
JavaScript часть
Выбираем созданный нами div
с уникальным id, с помощью функции onYouTubePlayerAPIReady из него создаем iframe, в данную функцию записываем id(videoId) нужного видео, настройки, и нужные обработчики событий(в нашем случае только onReady). В playerVars закомментировал опции, для быстрого доступа, можно пробовать использовать.
var tag
и все что ниже, нужно для загрузки JavaScript API проигрывателя IFrame.
Когда плеер готов(срабатывает событие onReady), в переменную newPlayBtn записываем нашу новую кнопку play и регистрируем для нее обработчик клика. После клика пользователя по кнопке, скрываем классы video-youtube__content_hide-origin-play-btn и video-youtube_overlay, запускаем видео и скрываем саму кнопку запуска. Готово!
'use strict';
/* -------------------------------------------------------------------------
begin Video Youtube
* ------------------------------------------------------------------------- */
function onYouTubePlayerAPIReady() {
var playerYoutube;
playerYoutube = new YT.Player("video-youtube__content", {
videoId: "cxXUEDbOxgo",
playerVars: {
// 'controls': 0,
// 'showinfo': 0,
// 'autohide': 1
},
events: {
onReady: onYouTubePlayerReady
}
});
}
function onYouTubePlayerReady(event) {
// https://developers.google.com/youtube/iframe_api_reference#Events
var targetYoutubeVideo = event.target;
var videoDomElem = document.getElementById(
event.target.getIframe().getAttribute("id")
);
var newPLayBtn = videoDomElem.nextElementSibling;
newPLayBtn.addEventListener("click", function(event) {
targetYoutubeVideo.playVideo();
this.classList.add('hidden');
videoDomElem.classList.remove('video-youtube__content_hide-origin-play-btn');
videoDomElem.parentNode.classList.remove('video-youtube_overlay');
});
}
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* -------------------------------------------------------------------------
end Video Youtube
* ------------------------------------------------------------------------- */
Заключение
Получился отличный вариант решения задачи, по созданию стилизованной кнопки play в youtube видео. Подобные стилизованные кнопки бывают довольно часто в макетах для верстки, и теперь их создание не проблема. Также, данное решение подразумевает возможность быстрого расширения функционала, за счет быстрого доступа к API iframe youtube.
Демонстрация ниже.
Смотреть полное демо на codepen.
See the Pen Removing, edit the “play on youtube” overlay on embeded videos by Alexandr Kazakov (@alexandr-kazakov) on CodePen.
Супер! Ты избавил от 2-3 часов головняка! Спасибо большое тебе!
Пожалуйста, Антон.
Еще могу порекомендовать тебе, прочитать Евангелие. Слово Евангелие переводится как: «Благая весть». Евангелие входит в книгу — Библия. Именно в Евангелие записано учение Христа.
Большое вам спасибо, получилось все с первого раза. Да еще и картинку навесил. Вообще топ!! Спасибо!!!
Jesus Christ!))
Это у вас для одного видео, а если у меня на сайте много видео, и такой функционал нужен для каждого, тогда как такое реализовать?
Александр . Вы писали что поправите ваше решение на IOS. И было бы не плохо , если бы ещё в комплекте сделали при скролле , когда видео появляется на экране оно начинало воспроизводиться , а когда пропадало с экрана , то останавливалось .
Здравствуйте, Олег.
Верно, нужно бы поправить, но как обычно кажется, что времени нет.
Хорошая идея и кажется, что это несложно реализовать, я даже думаю, что возможно похожая опция есть уже в api youtube.
Всего вам хорошего.
Александр, здравствуйте!
А можно убрать кнопку «Поделиться» с видео, когда размещаешь его на своем сайте? Имею ввиду размещение видео на wordpress через elementor. Спасибо.
Здравствуйте, Андрей.
Как видно, что мой пример плохо стал отображаться, видимо не выдержал времени и сейчас это решение нерабочее.
Андрей, здесь: https://developers.google.com/youtube/player_parameters#Parameters написаны всевозможные параметры. Вот например мы скрываем часть навигации: https://codepen.io/alexandr-kazakov/pen/GzOqZo как видно, что кнопку «Поделиться» скрыть не удаётся. Я не думаю, что это возможно.
Если хочется заблокировать клик по данной кнопке, то я бы в первую очередь смотрел в торону решения на CSS, а именно: перекрыть прозрачным фоном ту область(часть плеера).
Добрый день. Во встраиваемом iframe от YouTube есть класс ‘ytp-chrome-top’, как можно к нему применить свои стили?
Здравствуйте.
Когда вы спрашиваете, то хорошо бы видеть пример с кодом, например на codepen, ну или хотя бы скриншот, где именно там данный класс находится. Вот логичный ответ: https://stackoverflow.com/a/6495816/7460038 как видно ответ: никак этого не сделать, через iframe вы вставляете содержимое другого сайта. А вы видать хотели таким образом скрыть кнопки а название видео.
Спасибо очень полезная статья
что то не работает никуя
Ты прав, уже довольно давно это решение не работает. Данная статья написана в конце 2017-начало 2018, поэтому не удивительно, что что-то в плеере ютуба изменилось и мое решение перестало работать. В любом случае, я уверен, что есть рабочее решение, погугли.
Большое спасибо!!
Большое спасибо!!