Webview and iFrame Video full screen issue

To enable the full screen button on the YouTube player, the WebChromeClient has to implement OnShowCustomView and OnHideCustomView and thus it it your responsibility to define what is “full screen” for your app as it does not have to be defined by the device’s screen size.

Note: You still need the HTML5 tag of allowfullscreen in your iFrame html source

So lets assume you have this type of layout:

LinearLayout (id = linearLayout)
   LinearLayout (id = contentLayout)
      Button
      WebView

You can subclass WebChromeClient and define how you wish to display “full screen” content, in this example we will assume the most outer LinearLayout is where we want to display the YouTube video, the inner LinearLayout contains all the Activity’s content that you wish to hide while the full screen video is playing.

WebChromeClient Implementation:

public class FullScreenClient : WebChromeClient
{
    readonly FrameLayout.LayoutParams matchParentLayout = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent,
                                                                                                     ViewGroup.LayoutParams.MatchParent);
    readonly ViewGroup content;
    readonly ViewGroup parent;
    View customView;

    public FullScreenClient(ViewGroup parent, ViewGroup content)
    {
        this.parent = parent;
        this.content = content;
    }

    public override void OnShowCustomView(View view, ICustomViewCallback callback)
    {
        customView = view;
        view.LayoutParameters = matchParentLayout;
        parent.AddView(view);
        content.Visibility = ViewStates.Gone;
    }

    public override void OnHideCustomView()
    {
        content.Visibility = ViewStates.Visible;
        parent.RemoveView(customView);
        customView = null;
    }
}

SetWebChromeClient Implementation:

webView.SetWebChromeClient(new FullScreenClient(linearLayout, contentLayout));