Last Updated: February 25, 2016
·
1.409K
· hin556

Fullscreen your web when loaded in iframe

I had a mini classic game Brick Breaking Game clone in Javascript back in old days.

It is not displayed in fullscreen. Fair enough. But then I wanted to make it look fullscreen when it is framed in other web page.

Below is the script I needed:

window.onload = function() {
 if (window.top != window.self) {
 var container = document.getElementById("container");
 container.classList.add("fullscreen");
 }
}

And the css:

#container.fullscreen {
 width: 100%;
 height: 100%;
}

When you iframe it in your other web project like below, it displays in fullscreen.

<iframe src="http://brick-breaking-game.herokuapp.com"></iframe>

iframe Brick Breaking Game

Unfortunately the hover effect makes game control impossible...