QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads HTML5 Full Screen API Tutorial with Demo

HTML5 Full Screen API Tutorial with Demo

This post is a part 4 of HTML5 Full Screen API Tutorial with Demo post series.

Fullscreen API is available in desktop and mobile browsers.

Fullscreen API allows you to view a HTML element in full screen mode. Its useful while viewing images and videos. Its different than making the whole webpage full screen.

Here is a look at Fullscreen API:
View Demo

<!doctype html>
<html>
    <head>
        <title>Fullscreen API</title>
        <script type="text/javascript">

            function full_screen()
            {
                // check if user allows full screen of elements. This can be enabled or disabled in browser config. By default its enabled.
                //its also used to check if browser supports full screen api.
                if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document)
                {
                    if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled)
                    {
                        console.log("User allows fullscreen");
                   
                        var element = document.getElementById("box");
                        //requestFullscreen is used to display an element in full screen mode.
                        if("requestFullscreen" in element)
                        {
                            element.requestFullscreen();
                        }
                        else if ("webkitRequestFullscreen" in element)
                        {
                            element.webkitRequestFullscreen();
                        }
                        else if ("mozRequestFullScreen" in element)
                        {
                            element.mozRequestFullScreen();
                        }
                        else if ("msRequestFullscreen" in element)
                        {
                            element.msRequestFullscreen();
                        }

                    }
                }
                else
                {
                    console.log("User doesn't allow full screen");
                }
            }

            function screen_change()
            {
                //fullscreenElement is assigned to html element if any element is in full screen mode.
                if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
                {
                    console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement))
                }
                else
                {
                    // exitFullscreen us used to exit full screen manually
                    if ("exitFullscreen" in document)
                    {
                        document.exitFullscreen();
                    }
                    else if ("webkitExitFullscreen" in document)
                    {
                        document.webkitExitFullscreen();
                    }
                    else if ("mozCancelFullScreen" in document)
                    {
                        document.mozCancelFullScreen();
                    }
                    else if ("msExitFullscreen" in document)
                    {
                        document.msExitFullscreen();
                    }
                }
            }

            //called when an event goes full screen and vice-versa.
            document.addEventListener("fullscreenchange", screen_change);
            document.addEventListener("webkitfullscreenchange", screen_change);
            document.addEventListener("mozfullscreenchange", screen_change);
            document.addEventListener("MSFullscreenChange", screen_change);

            //called when requestFullscreen(); fails. it may fail if iframe don't have allowfullscreen attribute enabled or for something else.
            document.addEventListener("fullscreenerror", function(){console.log("Full screen failed");});
            document.addEventListener("webkitfullscreenerror", function(){console.log("Full screen failed");});
            document.addEventListener("mozfullscreenerror", function(){console.log("Full screen failed");});
            document.addEventListener("MSFullscreenError", function(){console.log("Full screen failed");});
        </script>
        <style type="text/css">
            div
            {
                height: 300px;
                width: 300px;
                background-color: green;
            }

            div:-webkit-full-screen
            {
                background-color: yellow;
            }
             
            div:-moz-full-screen
            {
                background-color: yellow;
            }
             
            div:-ms-fullscreen
            {
                background-color: yellow;
            }
             
            div:fullscreen
            {
                background-color: yellow;
            }

            /*backdrop pseudo element is used to style element behing the full screen element.*/
            :fullscreen::backdrop
            {
                background-color: red;
            }

            :-webkit-full-screen::-webkit-backdrop
            {
                background-color: red;
            }
           
            :-moz-full-screen::-moz-backdrop {
                background-color: red;
            }

            :-ms-fullscreen::-ms-backdrop {
                background-color: red; /* dark blue */
            }

        </style>
    </head>
    <body>
        <div id="box" onclick="full_screen();"></div>
    </body>
</html>
Jan 28, 2015Narayan Prusty
HTML5 Battery Status API with Code ExamplePage Visibility API Tutorial with Example
Comments: 2
  1. Sarfraz
    5 years ago

    Nice work, Is there any one who help me to remove ESC key events and any window key event on this full screen.

    ReplyCancel
  2. rom
    5 years ago

    sorry..i’ve a problem with the SCREEN_CHANGE function….I can’t use it in association with a button to restore the screen?

    ReplyCancel

Leave a Reply to rom Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 3 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • HTML5 Battery Status API with Code Example
  • Page Visibility API Tutorial with Example
  • Prevent Sleep using HTML5 Standby API
  • How to take Date Input in HTML
  • Create an Frontend Editor with Code Highlighting and Execution
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license