When using video.js, why doesn't the full-screen button work inside an iframe?
I use video.js for video play. When not using an iframe, clicking the full screen button works as expected. However, when using an iframe, the full screen button doesn't work. Why is this?
The homepage of video.js is http://videojs.com/
the code of iframe page is:
<!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>
the code of sco01-m.htm page is:
<!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>
The sco01-m.htm page can use the fullscreen button, But the iframe page can't use.
Answer
According to the W3 Spec "only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen."
While browsers' support for fullscreen is still experimental, you'll need to use Webkit and Mozilla-specific attributes webkitallowfullscreen and mozallowfullscreen:
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
On browsers that do not support the fullscreen API (e.g. Internet Explorer 10 and lower), fullscreen just won't work. To approximate fullscreen in those browsers, the video.js player expands to fill the browser window. However when player is in an iframe, it can't get any bigger than the iframe.
If there are multiple nested iframes, all parent iframes also need these attributes.