1

I have a Website with a html video with the default controls. To be able to show a div above the fullscreen video I followed this tutorial and created an outer div which contains the video and the div I want to show above.

Now I have the Problem that the Fullscreeen button of the default controls of the video still makes only the video fullscreen and not the parent div.

I tried to hook my custom fullsceen logic to the fullscreenchange-Event, but that did not work because of

Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.

Is there a possibility to catch a click event on that button?

I am using Firefox on Ubuntu 22.4

Here a demo html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video div demo</title>
</head>
<body>
    <div id="video-div" style="height: 80%; width: 100%;">
        <video
            id="video"
            src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4"
            playsinline
            preload="metadata"
            controls
            style="width: 100%; height: 100%"
        >
        </video>
        <button
                style="position: absolute; bottom: 2rem; right: 2rem; z-index: 0; background: #33334d; padding: 2rem;"
                onclick="toggle_fullscreen()"
        >
            Toggle Fullscreen
        </button>
    </div>
</body>

<script>
    document.getElementById("video").addEventListener('fullscreenchange', toggle_fullscreen)

    function toggle_fullscreen(){
        let video_div = document.getElementById("video-div");
        if (document.fullscreenElement === null) {
            video_div.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }
</script>
</html>

By clicking the "Toggle Fullscreen" Button the parent div is made fullscreen, but the event handler for the fullscreenchange event when using the fullscreen button of the default video-controls does not work.

saknarf
  • 11
  • 3
  • 3
    It could be that you've fixed the dimensions of the div. Sharing your html code would allow us to provide more specific answers. – Warisul Mar 29 '23 at 18:42
  • @saknarf You've got **missing technical details**.. What website (got a link to a demo page that shows the problem)? What browser did you test on?... Anyways the best option here is to just create your own custom controls with a button that when pressed will run its own function to fullscreen the parent div. Also double-check because I think on iOS only the video object itself can be fullscreened (_ie:_ your design idea of "a div above the video" might not work with iPhone's operating system). – VC.One Mar 29 '23 at 23:13
  • I added a demo file. Thanks for the suggestion @VC.One, i guess i will add some custom controls. That this will maybe not work on iOS does not matter for my use-case. – saknarf Mar 30 '23 at 20:30
  • @saknarf The update is a better starting point but you don't have a second div to "_show above the video"_ so not obvious what needs fixing now. See if there is any useful logic in my [Answer to a similar topic](https://stackoverflow.com/a/75040102/2057709) _eg:_ hiding/replacing the default controls as shown in the _"Older Answer"_ part. – VC.One Mar 31 '23 at 15:10

0 Answers0