How to make a video fullscreen when it is placed inside an iframe?
I'm using the default settings for my mediaelement.js player, and my initialization is very basic:
$('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?
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.
Answer
Stumbled upon this over at 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)