Question

I’m building a site using HTML 5 and want to have a full screen option. I’ve got it working using the below code, however when you click an internal link it exits full screen mode. This is rather undesirable. I’ve searched extensively and haven’t seen any answers to this question, only to questions relating to webapps for iOS, which this is not. Demo site is here: http://kvrm.co.uk/jw/

I’ve also noticed that when going fullscreen in Firefox a black band appears across the bottom of the screen, which does not happen in Chrome or Safari.

How can I keep the site in full screen mode while navigating to other internal pages? (Also, can anything be done about the black bar in Firefox?)

Here’s the full screen code:

(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
    viewFullScreen.addEventListener("click", function () {
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }, false);
}

var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
    cancelFullScreen.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }, false);
}


var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
    document.addEventListener("fullscreenchange", function () {
        fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {
        fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
    }, false);

    document.addEventListener("webkitfullscreenchange", function () {
        fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
    }, false);
}

var marioVideo = document.getElementById("mario-video")
    videoFullscreen = document.getElementById("video-fullscreen");

if (marioVideo && videoFullscreen) {
    videoFullscreen.addEventListener("click", function (evt) {
        if (marioVideo.requestFullscreen) {
            marioVideo.requestFullscreen();
        }
        else if (marioVideo.mozRequestFullScreen) {
            marioVideo.mozRequestFullScreen();
        }
        else if (marioVideo.webkitRequestFullScreen) {
            marioVideo.webkitRequestFullScreen();
            /*
                *Kept here for reference: keyboard support in full screen
                * marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            */
        }
    }, false);
}

})();

Answer 1

Use an iframe. The outer page contains only the toggle fullscreen button and a large iframe that fills the rest of the screen and contains your real content. Your layout already has a clear space to the left of the toggle button so you won’t even have to change your layout.

Navigation within the iframe, even to other domains, won’t break fullscreen mode on the outer frame.

You need to be careful sizing the iframe so there’s no scrollbar on the outer frame.