How to make a video fullscreen when it is placed inside an iframe?

Question

I\'m using the default settings for my mediaelement.js player, and my initialization is very basic: $(\'video\').mediaelementplayer();

My question is: I

Answer 1

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)

Answer 2

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).

Answer 3

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?

Answer 4

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.