.NET MAUI WebViews: How to Play Videos in Full Screen
Tags: dotnet, dotnetmaui, android
Published: 2023-05-08 16:14:04

If you are developing a .NET MAUI app that uses WebViews to display web content, you might want to enable the full-screen video feature for your users. This feature allows users to watch videos in full screen mode in **Android**, without leaving the WebView or opening a new activity. In this post, I will show you how to enable this feature in your .NET MAUI WebViews for **Android**, using a simple custom handler and some native code. Let’s get started!

---

### iOS
Good news, on iOS there are no additional changes to do, due to Apple's mobile platform already provides the full screen capability out-of-box.

### Android
For Android, we need to override the WebChromeClient in order for us to enable the full-screen video feature within a WebView.

## Create the new Web Chrome Client

- Create a file with the following name: `WebPlayerChromeClient.cs` and add it under the `/Platforms/Android` folder
- Add the following code, please review the code comments for further details
```csharp
using Android.App;
using Android.Content.Res;
using Android.OS;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;

namespace DemoApp.Platforms
{
    public class WebPlayerChromeClient : MauiWebChromeClient
    {
        private readonly Activity context;
        private int originalUiOptions;
        private Android.Views.View customView;
        private ICustomViewCallback videoViewCallback;

        public WebPlayerChromeClient(IWebViewHandler handler) : base(handler)
        {
            this.context = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
        }

        public override void OnHideCustomView()
        {
            if (context != null)
            {
                if (context.Window.DecorView is FrameLayout layout)
                    layout.RemoveView(customView);

                // It may happen that your app is compatible with Tablet in landscape-only. 
                // So, use the helper method to validate it. 
                // Only return to original position if it is a phone
                // Remove this validation if your app does not require it.
                if (!IsTablet(context))
                    context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;

                // Show again the SystemBars and Status bar
                if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
                {
                    context.Window.SetDecorFitsSystemWindows(true);
                    context.Window.InsetsController?.Show(WindowInsets.Type.SystemBars());
                }
                else
                {
                   context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)originalUiOptions;
                }

                videoViewCallback.OnCustomViewHidden();
                customView = null;
                videoViewCallback = null;
            }
        }

        public override void OnShowCustomView(Android.Views.View view, ICustomViewCallback callback)
        {
            if (customView != null)
            {
                OnHideCustomView();
                return;
            }

            if (context == null)
                return;

            videoViewCallback = callback;
            customView = view;
            customView.SetBackgroundColor(Android.Graphics.Color.White);
            context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;

            if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
            {
                context.Window.SetDecorFitsSystemWindows(false);
                context.Window.InsetsController?.Hide(WindowInsets.Type.SystemBars());
            }
            else
            {
                originalUiOptions = (int)context.Window.DecorView.SystemUiVisibility;
                var newUiOptions = originalUiOptions | (int)SystemUiFlags.LayoutStable | (int)SystemUiFlags.LayoutHideNavigation | (int)SystemUiFlags.LayoutHideNavigation |
                                (int)SystemUiFlags.LayoutFullscreen | (int)SystemUiFlags.HideNavigation | (int)SystemUiFlags.Fullscreen | (int)SystemUiFlags.Immersive;

                context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)newUiOptions;
            }

            if (context.Window.DecorView is FrameLayout layout)
                layout.AddView(customView, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
        }

        private bool IsTablet(Activity context)
        {
            return (context.Resources.Configuration.ScreenLayout & ScreenLayout.SizeMask) >= ScreenLayout.SizeLarge;
        }
    }
}


```
- Create a static class **WebViewHandler.cs** and add the following code:
```csharp
#if ANDROID
using Android.Graphics;
using Android.Webkit;
using Android.Widget;
using Android.App;
using static Android.Webkit.WebChromeClient;
using Android.Views;
using DemoApp.Platforms;
using Microsoft.Maui.Handlers;
#endif

namespace DemoApp.Handlers;

public class WebViewHandler
{
	public static void EnableVideoFeatures()
	{
#if ANDROID
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping(
		nameof(Android.Webkit.WebView.WebChromeClient),
		(handler, view, args) =>
		{
            handler.PlatformView.SetWebChromeClient(new WebPlayerChromeClient(handler));
        });
#endif
    }
}


```

- Register the handler
On the _MauiProgram.cs_ file register the handler 
`WebViewHandler.EnableVideoFeatures();`

## Conclusion
In this post, you learned how to enable the full-screen video feature for your .NET MAUI WebViews, using a custom handler and some native code. This feature can enhance the user experience of your app, by allowing users to watch videos in full screen mode, without leaving the WebView or opening a new activity. I hope you found this post useful and informative. If you have any questions or feedback, please leave a comment below.

Thanks for reading! Follow me on Twitter **[@ivictorhugo](https://twitter.com/ivictorhugo)**