时间戳

首页 > 解决方案 > 当全屏模式开启时，如何在 Youtube Iframe 上添加覆盖 div？

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

问题描述

我正在使用 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 也无济于事。即使视频在网站上全屏显示，我也想添加叠加层。

标签： jqueryhtmlcssmeteor-blazeyoutube-iframe-api

解决方案

经过一番研究，我认为我们实际上可以使用 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();
}

希望这可以帮助某人。干杯

推荐阅读