.NET MAUI: iOS WebView: Video Causes Content material Show Points

I’m utilizing a customized WebView in my .NET MAUI software to show HTML content material with customized fonts and colours. I’ve applied a customized renderer for iOS utilizing WKWebView to use these customizations. The implementation works superb when there isn’t any video within the HTML content material.

Nonetheless, when a video is current, I’m dealing with following points on the iOS platform:

• Content material not totally seen:

  When the HTML comprises a video, the whole content material doesn’t render correctly contained in the WebView.

• Content material doesn’t increase horizontally:

  The WebView content material doesn’t stretch to suit the accessible width.

• Tiny font dimension when a video is current:

  Initially, the textual content seems very small when a video is within the HTML.

• Video width doesn’t modify:

  The video doesn’t resize dynamically based mostly on the system width.

XAML Code:

iOS Customized Renderer:

public class MyWebViewRenderer : ViewRenderer
{
  WKWebView _wkWebView;

  protected override void OnElementChanged(ElementChangedEventArgs e)
  {
    base.OnElementChanged(e);

    if (Management == null)
    {
        var config = new WKWebViewConfiguration();
        config.AllowsInlineMediaPlayback = true;
        _wkWebView = new WKWebView(Body, config);
        _wkWebView.BackgroundColor = UIColor.Clear;
        _wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
        _wkWebView.ScrollView.ScrollEnabled = false;
        _wkWebView.Opaque = false;

        _wkWebView.NavigationDelegate = new MyNavigationDelegate(this);

        if (System.Idiom == TargetIdiom.Pill)
        {
            _wkWebView.Configuration.DefaultWebpagePreferences.PreferredContentMode = WKContentMode.Cell;
        }

        SetNativeControl(_wkWebView);
    }
}

public class MyNavigationDelegate : WKNavigationDelegate
{
    MyWebViewRenderer myWebViewRenderer;

    public MyNavigationDelegate(MyWebViewRenderer webViewRenderer)
    {
        myWebViewRenderer = webViewRenderer;
    }

    public async override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        string fontSize = System.Idiom == TargetIdiom.Cellphone ? "500%" : "320%";
        
        string injectCustomFontScript = @"
            let model = doc.createElement('model');
            model.innerHTML = `
                @font-face {
                    font-family: 'CustomFont';
                    src: url('Poppins-Mild') format('truetype');
                }
                physique, p, h1, h2, h3, h5, h6 {
                    font-family: 'CustomFont', sans-serif !necessary;
                    shade: #313131 !necessary;
                }
                h4 {
                    font-family: 'CustomFont', sans-serif !necessary;
                    shade: #679E18 !necessary;
                }
            `;
            doc.head.appendChild(model);
        ";

        string adjustTextSizeScript = $"doc.getElementsByTagName('physique')[0].model.webkitTextSizeAdjust="{fontSize}"";
        WKJavascriptEvaluationResult handler = (NSObject outcome, NSError err) =>
        {
            if (err != null) System.Console.WriteLine(err);
        };

        webView.EvaluateJavaScript(adjustTextSizeScript, handler);
        webView.EvaluateJavaScript(injectCustomFontScript, handler);

        // Alter WebView top dynamically
        var wv = myWebViewRenderer.Factor as MyWebView;
        if (webView.ScrollView != null && webView.ScrollView.ContentSize != null)
        {
            await Process.Delay(200);
            wv.HeightRequest = (double)webView.ScrollView.ContentSize.Peak;
        }
    }
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    base.OnElementPropertyChanged(sender, e);

    if (e.PropertyName == "Url")
    {
        string finalHtml = Factor.Url.Substitute("width="640"", "width="1000"");
        Management.LoadHtmlString(finalHtml, null);
    }
  }
}

UI screenshot:

How can I repair this problem?