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.
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" .
You can add allowfullscreen attribute to the iframe so that you can click fullscreen button in the HTML5 player toolbar to go fullscreen.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With