jquery - 当全屏模式打开时，如何在 Youtube Iframe 上添加覆盖 div？

Question

我正在使用 Meteor 框架和 Blaze 模板。 下面是我创建一个新的 youtube 对象并将其注入(inject)到 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
          }
        });
      };

这是我注入(inject) 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();
}

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