How to allow a web page go fullscreen?

Support for the JavaScript Fullscreen API varies by 3D WebView package. Please see the following sections for a description of each package's fullscreen support:

3D WebView for Windows and macOS

For 3D WebView for Windows and macOS, the JavaScript Fullscreen API causes the content to occupy the entire webview, but not the device's entire screen. If you want content to occupy the device's entire screen, you can use a CanvasWebViewPrefab to show a webview that spans the entire screen. If you want to detect when a web page shows fullscreen content, you can use the approach described in this article to detect the fullscreenchange JavaScript event.

3D WebView for Android

For 3D WebView for Android, the JavaScript Fullscreen API causes content to occupy the entire webview in 3D rendering mode, or the entire device screen if Native 2D Mode is enabled. This fullscreen support can be disabled with AndroidWebView.SetFullscreenEnabled().

3D WebView for Android with Gecko Engine

For 3D WebView for Android with Gecko Engine, the JavaScript Fullscreen API causes content to occupy the entire webview and is enabled by default. Fullscreen support was added in v4.10 and is not supported in older versions.

3D WebView for iOS

For 3D WebView for iOS, the JavaScript Fullscreen API is supported only in Native 2D Mode and causes content to occupy the device's entire screen. The Fullscreen API is enabled by default but can be disabled with iOSWebView.SetFullscreenEnabled(). By default, 3D WebView allows videos on iOS to play inline in the webpage without going fullscreen. If you want to force all videos to go fullscreen, you can achieve that with iOSWebView.SetAllowsInlineMediaPlayback().

3D WebView for visionOS

For 3D WebView for visionOS, the JavaScript Fullscreen API is supported only for webviews created with VisionOSWebView.CreateInWindow() and causes content to occupy the entire webview. The Fullscreen API is enabled by default but can be disabled with VisionOSWebView.SetFullscreenEnabled().

3D WebView for UWP / Hololens

For 3D WebView for UWP / Hololens, the JavaScript Fullscreen API causes content to occupy the entire webview (but not the entire device screen) in both 3D rendering mode and in Native 2D Mode. Fullscreen support is enabled by default.

2D WebView for WebGL

For 2D WebView for WebGL, the JavaScript Fullscreen API causes content to occupy the device's entire screen. Fullscreen support is enabled by default but can be disabled with WebGLWebView.SetFullscreenEnabled().

YouTube fullscreen video

For YouTube specifically, an alternative is to load a YouTube embed URL, which displays the video fullscreen within the webview. Here's an example of a YouTube embed URL:

https://www.youtube.com/embed/y03ko-FyHjY