HTML5 - Prevent Fullscreen Mode

Question

HTML5 - Prevent Fullscreen Mode

6.4k Views Asked by Alexander At 20 October 2024 at 03:29

I'm using the Fullscreen API with an embedded YouTube video to detect whether or not the browser window has entered fullscreen mode. I have that working great.

What I'd like to do is prevent from occurring the default behavior of entering fullscreen mode. I'd like to put in my own fullscreen mode logic so that I can overlay DOM elements on top of the YouTube Player. Currently, I can exit fullscreen mode immediately after entering it, but that results in a poor and confusing experience for the user.

One workaround is to remove the fullscreen button using YouTube's Player API parameters and add my own button with my own logic, but this is not ideal because users can still double-click on the YouTube player to make it full screen.

Here's my code for detecting the fullscreen state of the browser:

$(document).on("fullscreenchange webkitfullscreenchange msfullscreenchange mozfullscreenchange", function(event)
{
    onFullScreenChange(event);
});

function onFullScreenChange(event)
{
    var fullScreenElement =
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;

    var isFullscreen = !!fullScreenElement;

    console.log("In fullscreen mode?", isFullscreen);

    if (isFullscreen === true)
    {
        // TODO: Prevent the browser from entering full screen mode. These three lines don't prevent that behavior
        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();
        return false;

        // The commented code below works. Ideally, we'd want to prevent the browser from even entering full screen mode 
        //document.webkitExitFullscreen();
    }
}

Using preventDefault(), stopPropagation(), and stopImmediatePropagation() didn't work, so I'm stuck at this point. How can I prevent the browser from entering fullscreen mode, if indeed it is possible?

Original Q&A

There are 2 best solutions below

Ginxxx On 25 June 2017 at 05:51

here's what i did :)

 <script type="text/javascript">
    // Entering fullscreen mode
    $('#videoSrcBlk').click(function() {
        $("#full-screen").click(function() {
            $(this).attr('id');
            var vid = document.getElementById('selfVideo');    
            vid.removeAttribute("controls");

            if (vid.requestFullscreen) {
                vid.requestFullscreen();
            } else if (vid.mozRequestFullScreen) {
                vid.mozRequestFullScreen(); // Firefox
            } else if (vid.webkitRequestFullscreen) {
                vid.webkitRequestFullscreen(); // Chrome and Safari
            }
        });
    });

hope this help :)

**SilentTremor** · Accepted Answer

Using youtube iframe api

Disable full screen button: fs: 0

Disable Keyboard controls: disablekb: 1

When player loaded, remove full-screen option:

// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen 
videoPlayer.allowFullscreen = false;

Trigger full-screen on DOM player (iframe in our case) with Fullscreen_API

videoPlayer.requestFullScreen()

Full screen leave will happen if ESC key is pressed or video ends (custom event handling)

JsFiddle Working example:

   <!DOCTYPE html>
<html>
<body>
    <!-- The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <br />
    <button id="fullScreenPlayer">Full Screen Player</button>

    <script>
        // DOM player
        var videoPlayer;
        // This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        //  This function creates an <iframe> (and YouTube player)
        //  after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player',
            {
                height: '390',
                width: '640',
                videoId: 'nAgKA7R4Fz4',
                // params: https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
                playerVars: { 'fs': 0, 'disablekb': 1, 'rel': 0 },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
            // Get DOM video player not YT videoplayer
            videoPlayer = document.getElementById('player');
            // don't allow full screen 
            videoPlayer.allowFullscreen = false;
            // Listen for fulscreen changes, if you need custom logic here, but I won't recommned that, it's to complex and you don't have control inside YT iframe
            videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
            videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
            videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
            videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
        }

        //   If the video reach the end then player will leave full screen
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.ENDED) {
                leaveFullscreen();
            }
        }
        function stopVideo() {
            player.stopVideo();
        }

        // fullscreen event handller
        function fullScreeCallback(e) {
            // do what you like when you catch the event
            console.log(e);
            return false;

        }

        var goFullscreen = function () {
            if (videoPlayer === undefined) throw "player is undefined";
            if (videoPlayer.requestFullScreen) {
                videoPlayer.requestFullScreen();
            } else if (videoPlayer.mozRequestFullScreen) {
                videoPlayer.mozRequestFullScreen();
            } else if (videoPlayer.webkitRequestFullScreen) {
                videoPlayer.webkitRequestFullScreen();
            }
        }

        var leaveFullscreen = function () {
            if (document.cancelFullScreen) {
                document.cancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }

        document.getElementById('fullScreenPlayer').addEventListener("click", function(e) {
            goFullscreen();
        }, false);


    </script>
</body>
</html>

HTML5 - Prevent Fullscreen Mode

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in HTML5-FULLSCREEN

Related Questions in FULLSCREENCHANGE

Trending Questions

Popular # Hahtags

Popular Questions