How to show only a web page's video without the surrounding web page?

If you want to display only the video within a web page, here are some options for achieving that:

  1. If you're using YouTube, then the easiest option is to load a YouTube embed URL, which displays the video fullscreen. Here's an example of a YouTube embed URL:

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

  2. Another option is to load the URL for the video file directly instead of loading the URL for the web page. In some cases, you can get the video file's URL using IWebView.ExecuteJavaScript(), like this:

    await webViewPrefab.WaitUntilInitialized();
    await webViewPrefab.WebView.WaitForNextPageLoadToFinish();
    // Get the URL of the first video on the page.
    var videoUrl = await webViewPrefab.WebView.ExecuteJavaScript("document.getElementsByTagName('video')[0].currentSrc");
    if (videoUrl.StartsWith("http")) {
        webViewPrefab.WebView.LoadUrl(videoUrl);
    } else {
        // This can happen if the web page loads the video via a blob: URL.
        Debug.LogError("Invalid video URL: " + videoUrl);
    }

    Please note that this approach only works if the web page loads the video using an http:// or https:// URL. Popular video streaming sites like YouTube instead load the video using a blob: URL (i.e. using the JavaScript MediaSource API), and this approach doesn't work in that scenario.

  3. A third option is to use IWebView.ExecuteJavaScript() to run JavaScript that makes the video element fullscreen using the JavaScript Fullscreen API, like this:

    await webViewPrefab.WaitUntilInitialized();
    await webViewPrefab.WebView.WaitForNextPageLoadToFinish();
    // Make the first video on the page fullscreen.
    webViewPrefab.WebView.ExecuteJavaScript("document.getElementsByTagName('video')[0].requestFullscreen()");

    Important notes regarding this approach:

    • Support for the JavaScript Fullscreen API varies by 3D WebView package. To check if your 3D WebView package supports it, please see this page.
    • If the application tries to run the above JavaScript before the user has clicked or interacted with the page, the browser engine may reject the call to requestFullscreen() with the following error:

    Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

    If you encounter this error, an alternative specifically for YouTube is to use IWebView.SendKey() to trigger YouTube's "f" keyboard shortcut for fullscreen, like this:

    webViewPrefab.WebView.SendKey("f");
  4. The last option is to use IWebView.ExecuteJavaScript() to run JavaScript that modifies the video element's styles so that it occupies the entire webview.