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.
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)
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?
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.
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).
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).
This, I could fix purely with a little bit of 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.
