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.
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.
You need to Webkit and Mozilla-specific attributes attributes, if you are using iframe.
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
For example:
< iframe src="url" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
This will solve the issue :)
http://standupcomedy.me/tutorials/increaseplayersize
With Iframe you are putting your video in fixed perimeters inside a browser like 640x315. On some browsers no matter what happens the perimeters will stay 640x360. There is a way around this on all browsers if you have the patience to create 2 html pages for 1 video. Create an exact duplicate html page and call it sco01-mlargeplayer.html. In the large player page set the vid with larger width and height perimeters. Now under your original page player code after the /video tag implement an external link button that opens a new page reading something like "Increase Player Size". Use the target="_parent" attribute to open the new page on the same window if you don't mind taking people of the embedded video page. If you want a new page to open read the "Google Chrome tab note" further down the page. Remember to add a "decrease player size" link of the same nature on the newly created sco01-mlargeplayer.html page to revert back to the original video page, a back button works well.
<!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>
<a href="http://standupcomedy.me/woggie/demoplayer"target="_parent">Increase PlayerSize</a>
</div>
</body>
</html>
If you Want to open in a new page- the Google Chrome browser is tricky.
http://code.google.com/p/chromium/issues/detail?id=106780
-The issue with "Google Chrome tabs" not playing duplicate videos in new tabs.-
To get the same video to play in 2 Google Chrome tabs when the second page opens in a new tab: Change the order of the source videos on the second page sco01-mlargeplayer.html. This way Chrome recognizes the video as a new video.
Embedded player video source:
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>
New page video source
<source src="oceans-clip.webm" type='video/webm'>
<source src="A-2-4.mp4" type='video/mp4'>
I am working on a player control system to be used with all html5 players just for kicks and to get the videos on my site up.You can embed a demo here which will be updated as I work on it.I Call it The Woggie Player.
<iframe width="610" height="420" src="http://standupcomedy.me/woggie/movie" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
