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.

回答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)

回答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?

回答3:

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

回答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.

来源：https://stackoverflow.com/questions/15276929/how-to-make-a-video-fullscreen-when-it-is-placed-inside-an-iframe

标签

html

iframe

mediaelement.js