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

html iframe mediaelement.js

39,798

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

Solution 2

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?

39,798

Author by

Jazon

Updated on June 14, 2020

Comments

Jazon about 4 years
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.
Jazon over 11 years

Interesting idea. I was looking for more of a direct way to do it though, like the way that html5 <video> does it.
Matt S almost 10 years

I love simple solutions.
Shiyaz almost 8 years

This is relevant even after all these years. For people questioning framesets, LMS (Learning Management Systems) implementations still use framesets to launch SCORM courses. CSOD (Cornerstone OnDemand), am looking at you! Thanks @Ab_c this worked fine for me.
LiborV almost 8 years

Thanks a lot, that's what I was looking for
ekans over 6 years

best solution, simple and working near everywhere ;)