HTML5 - Prevent Fullscreen Mode

Question

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?

SilentTremor · Accepted Answer · 2017-06-27T12:29:49.117

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>

Thanks for your awesome answer! This works really well and is the workaround I mentioned in the question. Is there any way to get it working while using YouTube's full screen button? When YouTube's button is clicked, the fullscreenchange events are fired. I want to prevent the YouTube player from going into fullscreen mode and instead request full screen from one of my DOM elements while using YouTube's fullscreen button. — Alexander, Jun 28 '17 at 02:55
Full screen button can be shown, remove 'fs': 0 from player vars but it won't go full screen because is enforced not to do so, that event of click or other event cannot be listened being inside iframe, my answer isn't a workaround, this is the only way you can do it to prevent full screen, I'l try and find a solution for that, but I'm more than sure there ain't one. — SilentTremor, Jun 28 '17 at 06:36
Controlling fullscreen when source if yt.player "fs" button is imposible, I read again your question, it says it don't need full screen to happen at double click, at player fs control click or at keyboard shortcut press (I added this) over the player it will be overplayed some html, add there full screen trigger that's your only option with youtube iframe api, if you want to control full screen use another player, you can find many but mobile is a big concern with those, have a nice day. — SilentTremor, Jun 28 '17 at 08:55

score 0 · Answer 2 · answered Jun 25 '17 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 :)

Thank you for your response, but I'm not sure you read my question. There are several ways to enter fullscreen mode (keyboard, clicking on the video player), and this will not handle them all. — Alexander, Jun 25 '17 at 05:53
ow i get it . okay okay let me paste my code for preventing that kind of behaviour — Ginxxx, Jun 25 '17 at 05:55

HTML5 - Prevent Fullscreen Mode

2 Answers2

Linked