How to fullscreen youtube video in WebView

Question

I use following code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test_web_view_play_youtube);
    WebView w = (WebView) findViewById(R.id.w);
    w.setWebChromeClient(new WebChromeClient());
    w.setWebViewClient(new WebViewClient());
    w.getSettings().setJavaScriptEnabled(true);
    w.loadUrl("https://www.youtube.com/watch?v=gY-HZg1Uwpc");
}

i get following screenshot

In this screenshot, I could not see "fullScreen" button.

See answers in https://stackoverflow.com/questions/15796661/android-webview-app-wont-let-video-player-go-full-screen and https://stackoverflow.com/questions/14763483/android-webview-with-an-embedded-youtube-video-full-screen-button-freezes-video. — Bernd S, Jun 08 '17 at 20:16

score 10 · Answer 1 · edited Sep 14 '18 at 09:31

In your case, you have to first add FrameLayout in your XML file. After that

you have to implement two methods onShowCustomView and onHideCustomView of WebChromeClient as shown below:

FrameLayout customViewContainer = findViewById(R.id.customViewContainer);

webView.setWebChromeClient(new WebChromeClient() {

        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
            super.onShowCustomView(view,callback);
            webView.setVisibility(View.GONE);
            customViewContainer.setVisibility(View.VISIBLE);
            customViewContainer.addView(view);
        }
        public void onHideCustomView () {
            super.onHideCustomView();
            webView.setVisibility(View.VISIBLE);
            customViewContainer.setVisibility(View.GONE);
        }
    });

This almost works! The screen turns black, if the video isn't started, and the fullscreen button is pressed. Except from that, it seems to work — Nicolai Harbo, Jan 10 '19 at 10:29

chikadance · Answer 2 · 2016-08-10T13:52:44.917

I should custom WebChromeClient#onShowCustomView and #onHideCustomView, following code will show fullscreen button:

public class TestWebViewPlayYoutube extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_web_view_play_youtube);
        WebView w = (WebView) findViewById(R.id.w);
        w.setWebChromeClient(new CrmClient());
        w.setWebViewClient(new WebViewClient());
        w.getSettings().setJavaScriptEnabled(true);
        w.getSettings().setMediaPlaybackRequiresUserGesture(false);
        w.loadUrl("https://www.youtube.com/watch?v=gY-HZg1Uwpc&autoplay=1");
    }

    class CrmClient extends WebChromeClient {
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);
        }

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

update

i improve my code, it will show fullscreen and hide fullscreen for html5 (for ex youtube video player), to use this code, you must make sure main/assets/test.mp4 exist

public class TestFullscreen2 extends Activity {
    WebView w;
    RelativeLayout container;
    float dp;

    static FrameLayout fullscreenV;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_fullscreen2);

        dp = getDp(this);
        container = (RelativeLayout) findViewById(R.id.container);
        w = (WebView) findViewById(R.id.w);

        if (fullscreenV != null && fullscreenV.getParent() == null) {
            w.setVisibility(GONE);
            container.addView(fullscreenV);
        }

        w.setWebChromeClient(new CrmClient(this));
        w.setWebViewClient(new WebViewClient());
        w.getSettings().setJavaScriptEnabled(true);
        w.getSettings().setMediaPlaybackRequiresUserGesture(false);
        w.loadDataWithBaseURL("file:///android_asset/", "<video width='100%' height='auto' src='test.mp4' controls autoplay/>", "text/html", "utf-8", null);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        w = null;
    }

    class CrmClient extends WebChromeClient {
        Activity a;

        public CrmClient(Activity a) {
            this.a = a;
        }

        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);
            fullscreenV = (FrameLayout) view;
            a.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }

        @Override
        public void onHideCustomView() {
            super.onHideCustomView();
            fullscreenV = null;
            a.startActivity(new Intent(a, TestFullscreen2.class) {{
                setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
            }});
        }
    }
}

How to fullscreen youtube video in WebView

2 Answers2

Linked