全屏模式打开时，如何在Youtube iframe上添加叠加层div？

Question

我正在将Meteor框架与Blaze模板一起使用。下面是我创建新的youtube对象并将其注入dom的地方。

    self.autorun(() => {
      let tag = document.createElement("script");
      tag.src = "https://www.youtube.com/iframe_api";
      let firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      window.onYouTubeIframeAPIReady = function() {
        window.player = new YT.Player("" + index + "player", {
          height: "100%",
          width: "100%",
          videoId: data,
          playerVars: { wmode: "opaque", controls: 0 },
          events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
          }
        });
      };

这是我在其中插入我的YouTube播放器对象的HTML部分。

   <div id="iframeContainer">
    <div id="{{index}}player"></div>
    <div class="overlay">
    </div>
  </div>

我面临的问题是，当我单击视频上的全屏按钮时，重叠div被隐藏，而Z-index也无济于事。即使网站上的视频全屏显示，我也想添加一个叠加层。

Answer 1

经过一些研究，我发现我们实际上可以使用requestFullscreen（）请求div进入全屏链接：https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

就我而言，我只需要抓住容器：var elem = document.getElementById（“ iframeContainer”）;

然后添加以下几行：

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  /* Firefox */
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
  /* IE/Edge */
  elem.msRequestFullscreen();
}

希望这对某人有帮助。干杯