Fullscreen of an iframe on mobile devices

Question

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 1

You can try using some Inline Styling to reset the borders and set the height and width manually.

<iframe style = "display: block;border: none;height: 100vh; width: 100vw;"; 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>

---

JSFiddle

http://jsfiddle.net/qegaezk6/69/

Answer 2

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.