QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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
    4 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
    4 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 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license