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

Why are you using iframes? It's 2013... – BenM Mar 07 '13 at 16:49 — BenM, Mar 07 '13 at 16:49
Part of contributing to someone else's code... – Jazon Mar 07 '13 at 16:50 — Jazon, Mar 07 '13 at 16:50

score 55 · Accepted Answer · edited May 23 '17 at 12:09

55

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)

edited May 23 '17 at 12:09

Community

1
1

answered Mar 08 '13 at 14:44

Jazon

1,110
1
12
18

I love simple solutions. – Matt S Sep 25 '14 at 19:10
Thanks a lot, that's what I was looking for – LiborV Aug 09 '16 at 14:09
best solution, simple and working near everywhere ;) – ekans Feb 14 '18 at 10:42

score 2 · Answer 2 · answered Mar 08 '22 at 08:01

As people have mentioned iframe has to have allowfullscreen property active. Meaning if you have iframe within iframe (depth is more than 1), you would need to use this parameter on every iframe, to allow bottom one access to fullscreen API.

And it seems like standard is moving away from allowfullscreen property, new standard is allow="fullscreen" according to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

If you have any issue with this implementation check if iframe src you are injecting is of the same origin. If not, you might need to add src of the iframe you are trying to open on allowlist, which can be done with allow="fullscreen <src>". In case you don't want to track each and every source, you can use "*" instead. allow="fullscreen *", which will work as any src.

More details can be found under feature policy(since iframe allow list mimics page feature policy, but only for the iframe): https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy

allow="fullscreen *" worked for an embedded video player in my blazor app. Thank you! — bstiffler582, May 11 '23 at 17:43

score 1 · Answer 3 · answered Apr 12 '13 at 21:58

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?

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. — Shiyaz, Jul 24 '16 at 06:06

score 0 · Answer 4 · answered Mar 07 '13 at 16:53

0

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

answered Mar 07 '13 at 16:53

Brad M

7,857
1
23
40

Interesting idea. I was looking for more of a direct way to do it though, like the way that html5 – Jazon Mar 07 '13 at 17:46

score 0 · Answer 5 · answered Aug 27 '15 at 12:54

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.

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

5 Answers5

Linked

Related