如何使用外部容器为iframe设置全屏

Question

如何使用外部容器进入iframe的全屏？

当我执行此代码时：它确实会为此<div class="video-player">进入全屏，但带有youtube的iframe不会调整大小。我能做些什么来修复它？

我正在使用 youtube api，我的代码如下所示：

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, continer;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: 'izGwDsrQ1eQ',
    playerVars: {
      autoplay: 0,
      html5: 1,
      theme: "light",
      modesbranding: 0,
      color: "white",
      iv_load_policy: 3,
      showinfo: 0,
      controls: 0
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}
function onPlayerReady(event) {
  var player = event.target;
  continer = $('.video-player');
  setupListener();
}
function stopVideo() {
  player.stopVideo();
}
function setupListener() {
  $('button').addEventListener('click', playFullscreen);
}
function playFullscreen() {
  player.playVideo(); //won't work on mobile
  var requestFullScreen = continer.requestFullScreen || continer.mozRequestFullScreen || continer.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(continer)();
  }
}

.video-wrapper {
  height: auto;
  position: relative;
  padding-bottom: 15px;
  background: $whiteRGBA;
  border: 2px solid $whiteRGBA;
  border-radius: 8px;
  margin: 12px 0 9px;
}
.height-checker {
  position: relative;
}
.canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0);
}
.height-checker {
  position: relative;
}

<div class="video-player">
  <div class="controls-wrapper">
    <button>play fullscreen</button>
    <br>
  </div>
  <div class="height-checker">
    <canvas id="canvas"></canvas>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
  </div>
</div>

Answer 1

第一点是请求全屏是实验性的

Mozilla开发者网络说

这是一项实验性技术 由于此技术的规范尚未稳定，因此请检查兼容性表以获取在各种浏览器中使用的正确前缀。另请注意，随着规范的变化，实验性技术的语法和行为可能会在未来版本的浏览器中发生变化。

第二点是可以用允许全屏标志定义的 iframe

Iframe 允许全屏 - Mozilla 开发者网络

您可以尝试在请求全屏之前动态设置允许全屏

Answer 2

有一个德语博客解释了这个问题和一些解决方案。我尝试重复如何执行此操作：

使视频的宽度响应非常容易。只需在CSS上做。

该 HTML：

<iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>

CSS：

img,
iframe {
  max-width: 100%;
}

为了使高度响应，他使用以下代码：

该 HTML：

<div class="embed-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>
</div>

CSS：

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

我希望这对您有所帮助！您可以在此处找到博客文章也许你有一个很好的翻译程序;）

我知道你不希望它完全响应，但也许它有助于你的项目。

Answer 3

//首先检查全屏是否可用！

if (
document.fullscreenEnabled || 
document.webkitFullscreenEnabled || 
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {}

然后调用全屏操作

var i = document.getElementById("myimage");
// go full-screen
if (i.requestFullscreen) {
  i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
  i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
  i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
  i.msRequestFullscreen();
}

这是一篇我认为有用的博客文章！