Webview and iFrame Video full screen issue

Question

I have been looking for a solution to this for weeks while keep putting it on my backlog.

I have a simple webview as following

WebView webView = FindViewById<WebView>(Resource.Id.webviewVideo);
webView.ClearCache(true);
webView.ClearHistory();                    
webView.SetWebChromeClient( new WebChromeClient { });
webView.Settings.JavaScriptEnabled = true;
webView.Settings.LoadWithOverviewMode = true;
webView.Settings.UseWideViewPort = true;                    
webView.LoadDataWithBaseURL("https://.", iFrameString, "text/html", "UTF-8", null);

I am passing iFrame to it, the video loads and plays ok but the fullscreen option is not available.

Solutions I tried

• Enable JavaScript

• Set WebChromeClient

• LoadDataWithBaseURL with https://

I also have allowfullscreen for example the following iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/somevideoID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 

Any solution to this?

Firebird

Answer 1

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));

Criticism

I did not know we are required to define the fullscreen ourselves - Thank you so much for your help and all the knowledge - cheers – Firebird

@AbhriyaRoy C# / Xamarin.Android , see the question tags – Criticism

Answer 2

I understand that the answer is already accepted, but it took me some time to work through the code provided. I've never seen the "readonly" keyword, the "override" isn't quite where it should be, and it looks like he's answering for LinearLayout and provides FrameLayout.LayoutParams. I'm hoping this is just really good psudocode lol. If not, please let me know about the code syntax!

I posted this link in the comments section of a very useful YouTube video. If you're coming from there, you'll need need to add 2 parameters to the VideoAdapter class constructor. One for the LinearLayout(parent) and one for the RecyclerView (content).

THANK YOU to @SushiHangover for the code. You'll help many with this! Don't forget to upvote his answer.

---

My parent layout is LinearLayout (parent) with the child being a RecyclerView (content) that can hold multiple videos.

// Custom Web View Class to allow for full screen
private class CustomWebView extends WebChromeClient {

    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                                                                           ViewGroup.LayoutParams.MATCH_PARENT);

    ViewGroup parent;
    ViewGroup content;
    View customView;

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

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);

        customView = view;
        view.setLayoutParams(layoutParams);
        parent.addView(view);
        content.setVisibility(View.GONE);
    }

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();

        content.setVisibility(View.VISIBLE);
        parent.removeView(customView);
        customView = null;
    }

}

Longsome

What to pass in constructor of CustomWebView(ViewGroup parent, ViewGroup content)? I am using RecyclerView to show video list? I have define webView in ViewHolder class of RecyclerView.Adapter – Tother

I am passing in my LinearLayout (parent), RecyclerView (content) into the CustomWebView. VideoAdapter videoAdapter = new VideoAdapter(youTubeVideos, linearLayout, recyclerView); recyclerView.setAdapter(videoAdapter); – Longsome

// In main activity VideoAdapter videoAdapter = new VideoAdapter(youTubeVideos, linearLayout, recyclerView); recyclerView.setAdapter(videoAdapter); If you haven't, watch the video link in my answer, it will clear things up. The videoAdapter and youTubeVideos are both separate small classes. From the video, I just add the recyclerView View in MainActivity to pass to CustomWebView Class. I hope this helps! – Longsome

Thanks for your answer it works and enables full screen option which was disable earlier, but video frame still not in full screen and not covering whole screen space while device is in landscape mode. It has fixed width and height – Tother

@Longsome FYI syntax is Xamarin (C# / .NET multiplatform code by Microsoft). It's tagged in question. – Badman

Answer 3

webView.webChromeClient = object : WebChromeClient() {
        private var customViewCallback: CustomViewCallback? = null
        var layoutParams = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )

        var parent: ViewGroup? = findViewById(android.R.id.content)
        var content: ViewGroup? = null
        var customView: View? = null
        private var originalOrientation = 0


        override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(view, callback)
            [email protected] {
                clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
                addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)


                if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
                    val v: View = getWindow().getDecorView()
                    v.systemUiVisibility = View.GONE
                } else if (Build.VERSION.SDK_INT >= 19) {
                    //for new api versions.
                    val decorView = window.decorView
                    val uiOptions =
                        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    decorView.systemUiVisibility = uiOptions
                }


                statusBarColor = Color.TRANSPARENT
            }
            originalOrientation = [email protected];
            customView = view;
            view?.setLayoutParams(layoutParams);
            parent?.addView(view);
            content?.setVisibility(View.GONE);
          
        }

        override fun onHideCustomView() {
            super.onHideCustomView()
            content?.visibility = View.VISIBLE;
            parent?.removeView(customView);
            customView = null;
           
            [email protected] = View.SYSTEM_UI_FLAG_VISIBLE;
            [email protected] = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
           
        } 
    }

Sweepback