Displaying Elements Other Than Fullscreen Element (Html5 Fullscreen API)

Displaying elements other than fullscreen element (HTML5 fullscreen API)

It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show, but the z-index of the fullscreened element can not be changed (it can, but the browser just ignores the value — even with !important).

Maybe the only reference I could find to this:

https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html

Also, in Chrome dev tools:

So either set elements to the maximum z-index, or, the better solution would be to just create a container element, make it so that all elements you want to display are children of the container element, and fullscreen it.

Make a div visible on full screen of another div

It seems it was once possible to solve this issue with z-index but its since been patched by newer browser releases - See this thread

I believe Tushar Vaghela's answer is your best chance of achieving your desired result, which is to include the elements you wish to overlay within the fullscreened element - See this thread.

Firefox fullscreen video append DOM elements

To Display Overlay Element, instead of making video fullscreen, make parent of Video Element Fullscreen.

See Example Here - https://jsfiddle.net/tv1981/tm069z9c/128/

In following structure, I am making 'container' fullscreen

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay muted>
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> Your browser does not support the video tag.
  </video>
  <div class='footer'>
    This is Test Overlay for Video
  </div>
</div>

JavaScript

fs.addEventListener('click', goFullScreen);

function goFullScreen() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
    document.webkitFullscreenElement || document.msFullscreenElement;
  if (fullscreenElement) {
    exitFullscreen();
  } else {
    launchIntoFullscreen(document.getElementById('container'));
  }
}

This is working in Chrome Version 60.0.3112.101 (Official Build) (64-bit), FireFox Developer Edition 56.0b5 (64-bit)

HTML5 Fullscreen API and DIV's

Do you want in "fullscreen mode" browser will show full MAP ?

Try this code to handle

var elem = document.getElementById("idOfMAP");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Hope it helps you.

How to show jquery ContextMenu in Fullscreen Mode?

I think the problem is that the z-index of your context menu (100 in your case) is too small, below the fullscreen div z-index (which is aound 2147483647).

You should check the SO answer here: Displaying elements other than fullscreen element (HTML5 fullscreen API)

making a video full screen using full screen API

Use vh and vw.

video {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

1vh is 1% of the total portview height, 1vw is 1% of the total portview width. By default, the html and body tags only take up the height that the content does, not the entire screen. Similarly, a page with more than one screen's worth of content will have 100% be more space than 100vh.

position: fixed; for good measure so that it sits above the rest of the content in the corner and makes a snug fit.

Edit: Changed "absolute" to "fixed" so it will fit correctly on a long or wide page. fixed is relative to the browser, whereas absolute is relative to the parent container.

Edit 2: You've changed your question to ask how to make a video fullscreen, not fullpage. The answer subsequently changes.

Here is a guide on accomplishing this; be aware it uses JS and requires the user's approval of the action. You cannot hijack a user's browser.

http://www.sitepoint.com/use-html5-full-screen-api/

Is there a way to make HTML5 video fullscreen?

2020 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.

This can be applied to any element, including videos.

Browser support is good, but Internet Explorer and Safari need prefixed versions.

An external demo is provided as Stack Snippet sandboxing rules break it.

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>

---

div {
    width: 200px;
    height: 200px;
}
#one { background: yellow; }
#two { background: pink; }

---

addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
        div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
        div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});

---

2012 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen method which allows arbitrary elements (including <video> elements) to be made fullscreen.

It has experimental support in a number of browsers.

---

2009 answer

Note: this has since been removed from the specification.

From the HTML5 spec (at the time of writing: June '09):

User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.

Browsers may provide a user interface, but shouldn't provide a programmable one.

HTML5 - Prevent Fullscreen Mode

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>

---

Related Topics