Fullscreen of an iframe on mobile devices

html iframe mobile-safari mobile-chrome
Andrej Tihonov picture Andrej Tihonov · Apr 23, 2015 · Viewed 15.2k times · Source

I have got an iframe. Inside this iframe I have a player, which can go into fullscreen. Everything works fine on desktop browsers, but it does not works in chrome on a tablet nor in mobile safari on an iPhone, but it works in mozilla firefox on a tablet. Is it possible to let the iframe go fullscreen in chrome and safari on mobile devices?

Here is, how I set the iframe:

<iframe src='http://www.bader-kuperman.de/v3/pics/j-ch103346black/img3d_000051.html' border='0' width='620' height='465' scrolling='no' marginheight='0' marginwidth='0' frameborder='0' style='float:left; margin-left:0px' allowfullscreen='true' webkitallowfullscreen='true' mozallowfullscreen='true'></iframe>

Here is the website, where I integrated the player through an iframe.

http://www.bader-kuperman.de/de/collection/497/91/just/ch1033/black2014-09-17-21-15-01_-detail

Hope u could give me some advices.

Answer

Colin picture Colin · Apr 23, 2015

To cover the entire viewport, you can use:

<iframe src="PAGE" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> </iframe>

That will fill the entire page or part you want to fill.

Related questions

Can't scroll iframe on mobile iOS Safari

Even with overflow set to scroll, can't get the google forms iframe in an overlay to scroll, instead the background underneath keeps scrolling on mobile. It scrolls inside the iframe just fine on desktop chrome/safari, even when I change …

Read More
How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More