Youtube видео. Изменить, удалить кнопку play

Скрываем, изменяем кнопку play, у встроенного на сайт youtube видео. На нативном JavaScript.

В сети видел только варианты решения, где видео полностью перекрывается картинкой сверху, тем самым закрывается стандартная кнопка. Далее, на новую картинку, сверху добавляется своя стилизовання кнопка.

В данном решении, видео ничем не перекрывается, стандартная кнопка убирается с помощью CSS. Сверху идет прозрачный фон и стилизованная кнопка. Данное решение мне кажется лучше, т.к. не нужно загружать дополнительные картинки.

Мы будем делать адаптивное видео, поэтому у нас получается две обертки. Мы не пишем в 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>

Пишем стандартные стили для адаптивности видео. Как сделать видео с 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
 * ------------------------------------------------------------------------- */

Выбираем созданный нами  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
 * ------------------------------------------------------------------------- */