htmliframemediaelement.js

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.


Solution

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