Untitled

<!-- grandparent.html : This is loaded in the browser -->
<!DOCTYPE HTML>
<html>
<style type="text/css">
    body {
        color: purple;
        position: relative;
        box-shadow: 0 0 25px #000000;
        height: 100%;
        display:block;
        margin:auto;
        padding: 0;
        text-align:  center;
        width: 100%;
    }
</style>
<body>
<iframe id="grandParentFrame" src="parent.html" width="1024" height="768" frameborder="0"  scrolling="no" allowFullScreen style="border: 5px solid #0000ff"></iframe>
</body>
</html>

<!--parent.html -->
<!DOCTYPE HTML>
<html>

<body>
<iframe id="parentFrame" src="child.html" width="804" height="600" frameborder="0"  scrolling="no" allowFullScreen style="border: 5px solid #00ff00"></iframe>
</body>
</html>

<!--child.html-->
<!DOCTYPE HTML>
<html>
<head>
  <script>

        fullscreenHandler = function (){
            /* This doesn't work*/
            var frame = parent.document.getElementById('parentFrame');
            /* This works */
            var frame = parent.parent.document.getElementById('grandParentFrame');
            if (frame.mozRequestFullScreen) {
                // This is how to go into fullscren mode in Firefox
                // Note the "moz" prefix, which is short for Mozilla.
                frame.mozRequestFullScreen();
            } else if (frame.webkitRequestFullScreen) {
                // This is how to go into fullscreen mode in Chrome and Safari
                // Both of those browsers are based on the Webkit project, hence the same prefix.
                frame.webkitRequestFullScreen();
            }

        }

    </script>
</head>

<body>
    <div style="border: 5px solid #000000" width="300" height="300">
        <input type="submit" value="FullScreen" onclick="fullscreenHandler()">
    </div>
</body>
</html>