Disable fullscreen on double-click?

Admin 1
Viewed 4703

I have an app which loads a webpage in a webview2 control (Edge Chromium), the page it's loading simply contains a html5 video tag with source and a bit of css for styling.

The css I'm using makes the video take up the full area of the browser page which is working fine, but I want to disable the ability to enter fullscreen (as in, taking up full area of desktop).

I can hide the fullscreen button in css by doing:

::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

But the video can still enter fullscreen when double-clicked.

I've tried moving the video to a secondary page sourced in an iframe with donotallowfullscreen but this still doesn't work, double-clicking still results in fullscreen.

<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>

What else can I try to prevent the video from entering fullscreen? I've tried searching around on Google but all of the results are in reference to Youtube's video embedding.

Not sure why necessary, but here's full reproducible code....

Index.html

<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>

Iframe.html

<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>
html5-video fullscreen css javascript
2 Answers

There is the controlsList attribute which is in the process of being defined, but there are still some issues to sort out before it's official, and currently it seems to be implemented only in Blink browsers.

video{ max-height: 100vh; }
<video  controls
  src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>

I didn't checked for IE, but for Safari, they don't even respect the allow of an <iframe> when the fullscreen request has been made by the <video>'s controls, because this fullscreen mode is not the one defined by the Web-API, but rather a native mode. This is also why in this browser we can't even call document.[vendor]ExitFullscreen() (in Firefox this would work because their current UI is using the Web-API).

So the only way to make this work in all browsers would be to make your own controls entirely, and to block the clicks on your <video> element (pointer-events: none).

user_37027970

Just I added controlsList="nofullscreen" attribute. But playing the video on click on the center of won't work. So I added onclick="vd.play()" attribute. <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>

user_32708410
Related