我使用video.js进行视频播放。不使用iframe时，按预期可以单击全屏按钮。但是，在使用iframe时，全屏按钮不起作用。为什么是这样？
video.js的主页为http://videojs.com/
iframe页面的代码为:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<iframe src="sco01-m.htm" id="cw" name="cw" width="100%" height="1000px;" scrolling="no" frameborder="0"></iframe>
</body>
</html>
sco01-m.htm页面的代码为:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<body>
<div align="center">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="800" height="600" poster="1.jpg"
data-setup="{}">
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>
</video>
</div>
</body>
</html>
sco01-m.htm页面可以使用全屏按钮，但是iframe页面不能使用。
最佳答案
根据W3 Spec的说法，“只有通过HTML iframe元素的allowfullscreen属性明确允许的嵌入内容才能全屏显示。这可以防止不受信任的内容全屏显示。”
尽管浏览器对全屏的支持仍处于试验阶段，但您需要使用Webkit和Mozilla特定的属性webkitallowfullscreen和mozallowfullscreen:
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
在不支持全屏API(例如Internet Explorer 10 and lower)的浏览器上，全屏将无法正常工作。为了使这些浏览器接近全屏，video.js播放器将展开以填充浏览器窗口。但是，当播放器位于iframe中时，它的大小不能超过iframe。
如果存在多个嵌套的iframe，则所有父iframe也需要这些属性。
关于iframe - 使用video.js时，为什么全屏按钮不能在iframe中使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14151899/