Switch Webview2 to fullscreen when page video goes fullscreen

Question

I have a webpage that is basically a video with custom controls that's been put in a webview2 and when I try to use the full screen control that the page has, it doesn't go into fullscreen. I haven't made any changes to the code as its a fresh new webview2 and project.

Anyone know how I can do this?

Answer 1

When the video goes to full-screen mode, it will cover the surface of WebView control and raises an event to let you know the full-screen mode has changed, then it's up to you to decide what to do. If you have a WebVeiw control which is set to Dock = Fill, to fill the form, it's enough for you to handle that event when the video goes to full-screen mode and then make your form full-screen.

As it's also mentioned in the other answer, when full-screen status of an HTML element in the page changes the CoreWebView2.ContainsFullScreenElementChanged will be raised. You can handle that event and then check the CoreWebView2.ContainsFullScreenElement property which indicates if the WebView2 contains a fullscreen HTML element and change your form size/mode based on that.

Example

Here in this example, I've added a FullScreen property to my form and also handled the ContainsFullScreenElement and have switched between fullscreen and normal mode in my form.

To make it working, make sure you have a WebView control on your form and set its Dock to Fill and then handle the Load event of the form like this:

private async void Form1_Load(object sender, EventArgs e)
{
    webView21.Source = new Uri("https://youtube.com");
    await webView21.EnsureCoreWebView2Async();
    webView21.CoreWebView2.ContainsFullScreenElementChanged += (obj, args) =>
    {
        this.FullScreen = webView21.CoreWebView2.ContainsFullScreenElement;
    };
}

private bool fullScreen = false;
[DefaultValue(false)]
public bool FullScreen
{
    get { return fullScreen; }
    set
    {
        fullScreen = value;
        if (value)
        {
            this.WindowState = FormWindowState.Normal;
            FormBorderStyle = FormBorderStyle.None;
            WindowState = FormWindowState.Maximized;
        }
        else
        {
            this.Activate();
            this.FormBorderStyle = FormBorderStyle.Sizable;
            this.WindowState = FormWindowState.Normal;
        }
    }
}

Answer 2

When content in the WebView2 becomes "fullscreen" it actually only fills the area of the WebView2 and then dispatches the CoreWebView2.ContainsFullscreenElementChanged event. It is up to the host app to get that event and change the size of the WebView2 control to fill the screen or fill the host app window or whatever is appropriate for that application. You can read more about this in the ContainsFullscreenElementChanged event documentation and see sample code.