Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 860
Jazon Avatar asked Mar 07 '13 16:03

Jazon


People also ask

How do I enable full screen in iframe?

For more information and examples see: Using Feature Policy > The iframe allow attribute. Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method. Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen" .

Can iframe go fullscreen?

You can add allowfullscreen attribute to the iframe so that you can click fullscreen button in the HTML5 player toolbar to go fullscreen.


1 Answers

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)

like image 165
Jazon Avatar answered Nov 23 '22 09:11

Jazon