«при щелчке» на элементе с указателями на события null (или альтернативный метод)

Question

Я встроил в свой сайт iframe и хочу разместить оверлей поверх поверх. Моя конечная цель - разместить наложенное изображение и текст поверх видео на YouTube, которое исчезает при воспроизведении и снова появляется при приостановке видео.

Я хочу иметь возможность переключать класс воспроизведения видео на оболочку iframe, а затем отображать и скрывать наложение в зависимости от того, имеет ли родительский класс.

Я поместил свой оверлей поверх iframe и добавил pointer-events:none к оверлею, чтобы при наведении курсора на него сам оверлей игнорировался, и я все еще мог щелкать и воспроизводить видео iframe youtube, которое сидит под ним.

Моя проблема в том, что мне нужно зарегистрировать функцию, которая запускается при воспроизведении и приостановке iframe, но я не могу, потому что

1. Наложение с pointer-events:none мешает мне зарегистрировать щелчок на iframe.
2. Я не могу зарегистрировать щелчок на самом оверлее, потому что мне нужно иметь возможность щелкать видео на YouTube, которое находится под ним, поэтому требуется pointer-events:none.

Существует ли какой-либо метод, имеющий эквивалент pointer-events:none на оверлее, но все же можно регистрировать слушателей и щелкать события на элементе, который находится под ним?

Answer 1

Возможно, вместо того, чтобы пытаться угадать состояние воспроизведения по тому, нажал ли пользователь на оверлей (что может привести к ошибкам, таким как нажатие на кнопку громкости или полноэкранную кнопку), вы можете использовать действительный официальный API iframe YouTube. . Он содержит множество функциональных возможностей, и, вероятно, вас больше всего интересует событие onStateChange . Прикрепляя его, вы можете надежно проверить, играет ли игрок или находится в режиме паузы (или в любом другом состоянии, например, «буферизация»). На основе документации API и ваших требований я создал codepen , который имеет наложение, которое меняется в зависимости от состояния воспроизведения.

PS. По какой-то причине во встроенном фрагменте stackoverflow возникают проблемы с встраиванием iframes youtube из-за ошибок Failed to execute ‘postMessage’ on ‘DOMWindow’, но я все же выкладываю приведенный ниже код для полноты картины. Для ознакомления с рабочей версией см. Ссылку на код, указанный выше.

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
'onStateChange': onPlayerStateChange
        }
    });
}

let overlay = document.querySelector('.overlay');

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      overlay.classList.remove("paused");
      overlay.classList.add("playing");
    }
    if (event.data == YT.PlayerState.PAUSED) {
      overlay.classList.add("paused");
      overlay.classList.remove("playing");
    }
}

.wrapper {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events:none;
}
.playing:before {
  position: absolute;
  content:"";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.3;
  background-color: green;
}
.playing:after{
  content: "playing";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}

.paused:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.3;
  background-color: orange;
}

.paused:after{
  content: "paused";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}

<div class="wrapper">
  <div id="player"></div>
  <div class="overlay"></div>
</div>

Обновление

В случае добавления iframe из CMS, вы все равно можете использовать методы API youtube и присоединить его к существующему элементу iframe, как показано в этом codepen . По сути, вы предоставляете только определение событий для конструктора YT.Player (вместо предоставления полного списка параметров videoID, height, width и т. Д.):

player = new YT.Player('player', {
    events: {
        'onStateChange': onPlayerStateChange
    }
});