Last Updated: February 25, 2016
· 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.self) {
    var container = document.getElementById("container");

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=""></iframe>

iframe Brick Breaking Game

Unfortunately the hover effect makes game control impossible...