Html 将视频放置在 iframe 中时如何使视频全屏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15276929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a video fullscreen when it is placed inside an iframe?
提问by Jazon
I'm using the default settings for my mediaelement.js player, and my initialization is very basic:
$('video').mediaelementplayer();
我正在使用 mediaelement.js 播放器的默认设置，并且我的初始化非常基本：
$('video').mediaelementplayer();
My question is: Is it possible to fullscreen the player when the video is embedded in an iframe? When I press fullscreen, the video maximizes to the iframe but not to the entire screen however. Is this a limitation of html or is there a way to get around it?
我的问题是：当视频嵌入到 iframe 中时，是否可以全屏显示播放器？当我按全屏时，视频会最大化到 iframe，但不会最大化到整个屏幕。这是 html 的限制还是有办法绕过它？
The general structure looks like this:
一般结构如下所示：
<!DOCTYPE html>
<html>
<head />
<body>
<iframe>
<!DOCTYPE html>
<html>
<head />
<body>
*My Video Here <video> ...*
<body>
</html>
</iframe>
</body>
</html>
Thanks!
谢谢！
EDIT:
It seems this is player specific. The default html5 <video>implementation maximizes to fullscreen just fine, even inside an iframe.
编辑：这似乎是特定于玩家的。默认的 html5<video>实现最大化到全屏就好了，即使在 iframe 中也是如此。
回答by Jazon
Stumbled upon this over at video.js:
在 video.js 上偶然发现了这个：
video.js inside a modal window: full screen not working
And the answer is to add these attributes to iframe:
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">(no IE support though)
答案是将这些属性添加到 iframe 中：（
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">虽然不支持 IE）
回答by Ab_c
I use this bit of code in order to keep track of whether a video has gone in/out of fullscreen mode:
我使用这段代码来跟踪视频是否进入/退出全屏模式：
MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
// Your code here
this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
// Your code here
this.exitFullScreen_org();
}
I assume you can have this call a function on the parent page to enlarge the iframe?
我假设您可以在父页面上调用一个函数来放大 iframe？
回答by WoodrowShigeru
My customer already contented herself with the limited video 'fullscreen' width – it was just the black bars above and below that I had to get rid of. (in my case the dimensions of the iFrame were 945×1500).
我的客户已经对有限的视频“全屏”宽度感到满意——我必须摆脱上面和下面的黑条。（在我的例子中，iFrame 的尺寸是 945×1500）。
This, I could fix purely with a little bit of CSS.
这个，我可以纯粹用一点 CSS 来解决。
.mejs-container-fullscreen {
background-color: #fff !important;
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
height: 530px !important;
top: 500px !important;
}
.mejs-container.mejs-container-fullscreen .mejs-controls {
bottom: auto !important;
top: 1000px !important; /* video top + video height - controls height (30px) */
}
Admittedly, this is a rather limited solution, and it highly depends on video size (and size consistency for several videos) as well as background color. But it may work for you, too.
诚然，这是一个相当有限的解决方案，它高度依赖于视频大小（以及多个视频的大小一致性）以及背景颜色。但它也可能对你有用。
回答by Brad M
Here is a "hack" solution that will even make your page load faster.
这是一个“黑客”解决方案，甚至可以使您的页面加载速度更快。
1) Create an image (usually a screenshot of the video) in place of the iFrame.
1) 创建一个图像（通常是视频的屏幕截图）代替 iFrame。
2) Bind a click event handler to the image so that it creates an iFrame to the dimensions you require. (You can base those dimensions on the client's window size).
2) 将单击事件处理程序绑定到图像，以便它根据您需要的尺寸创建 iFrame。（您可以根据客户端的窗口大小确定这些尺寸）。
