Full screen option not available when loading YouTube video in WebView
Solution 1
iFrame
is an option but you can try this
Android's WebView and WebChromeClient class extensions that enable fully working HTML5 video support
I have not try this yet but hope will help to you.
Solution 2
Do following changes in your java file:
view.setWebViewClient(new Browser());
view.setWebChromeClient(new MyWebClient());
and add this 2 class that is class Browser and class MyWebClient in java file
class Browser
extends WebViewClient
{
Browser() {}
public boolean shouldOverrideUrlLoading(WebView paramWebView, String paramString)
{
paramWebView.loadUrl(paramString);
return true;
}
}
public class MyWebClient
extends WebChromeClient
{
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
protected FrameLayout mFullscreenContainer;
private int mOriginalOrientation;
private int mOriginalSystemUiVisibility;
public MyWebClient() {}
public Bitmap getDefaultVideoPoster()
{
if (MainActivity.this == null) {
return null;
}
return BitmapFactory.decodeResource(MainActivity.this.getApplicationContext().getResources(), 2130837573);
}
public void onHideCustomView()
{
((FrameLayout)MainActivity.this.getWindow().getDecorView()).removeView(this.mCustomView);
this.mCustomView = null;
MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
MainActivity.this.setRequestedOrientation(this.mOriginalOrientation);
this.mCustomViewCallback.onCustomViewHidden();
this.mCustomViewCallback = null;
}
public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback)
{
if (this.mCustomView != null)
{
onHideCustomView();
return;
}
this.mCustomView = paramView;
this.mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
this.mOriginalOrientation = MainActivity.this.getRequestedOrientation();
this.mCustomViewCallback = paramCustomViewCallback;
((FrameLayout)MainActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(3846);
}
}
Solution 3
If I understand correctly you have an iframe that contains a second iframe (the youtube one). Try adding the allowfullscreen attribute to the "parent" iframe.
For full browser support it should look like this:
<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>
Solution 4
Answer of @Ameya Bonkinpelliwar
on Kotlin
class WebChrome(activity: Activity) : WebChromeClient() {
private val activityRef = WeakReference(activity)
private var customView: View? = null
private var customViewCallback: CustomViewCallback? = null
private var originalOrientation = 0
private var originalSystemUiVisibility = 0
override fun onProgressChanged(view: WebView, progress: Int) {
view.context.activityCallback<MainActivity> {
onProgress(progress)
}
}
override fun getDefaultVideoPoster(): Bitmap? {
return activityRef.get()?.run {
BitmapFactory.decodeResource(applicationContext.resources, 2130837573)
}
}
override fun onHideCustomView() {
activityRef.get()?.run {
(window.decorView as ViewGroup).removeView(customView)
customView = null
window.decorView.systemUiVisibility = originalSystemUiVisibility
requestedOrientation = originalOrientation
}
customViewCallback?.onCustomViewHidden()
customViewCallback = null
}
override fun onShowCustomView(view: View?, viewCallback: CustomViewCallback?) {
if (customView != null) {
onHideCustomView()
return
}
customView = view
activityRef.get()?.run {
originalSystemUiVisibility = window.decorView.systemUiVisibility
originalOrientation = requestedOrientation
customViewCallback = viewCallback
(window.decorView as ViewGroup).addView(
customView,
ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
)
window.decorView.systemUiVisibility = 3846
}
}
}
Solution 5
//Add WebChromeClient to your webview
//With navigation option and player controls overlapping handlled.
class UriChromeClient extends WebChromeClient {
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
protected FrameLayout mFullscreenContainer;
private int mOriginalOrientation;
private int mOriginalSystemUiVisibility;
@SuppressLint("SetJavaScriptEnabled")
@Override
public boolean onCreateWindow(WebView view, boolean isDialog,
boolean isUserGesture, Message resultMsg) {
mWebviewPop = new WebView(getApplicationContext());
mWebviewPop.setVerticalScrollBarEnabled(false);
mWebviewPop.setHorizontalScrollBarEnabled(false);
mWebviewPop.setWebViewClient(new MyWebViewClient());
mWebviewPop.getSettings().setSupportMultipleWindows(true);
mWebviewPop.getSettings().setJavaScriptEnabled(true);
mWebviewPop.getSettings().setUserAgentString(mWebviewPop.getSettings().getUserAgentString().replace("; wv", ""));
// mWebviewPop.getSettings().setUserAgentString(USER_AGENT);
mWebviewPop.getSettings().setSaveFormData(true);
mWebviewPop.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
mContainer.addView(mWebviewPop);
WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
transport.setWebView(mWebviewPop);
resultMsg.sendToTarget();
return true;
}
@Override
public void onCloseWindow(WebView window) {
Log.d("onCloseWindow", "called");
}
//
public Bitmap getDefaultVideoPoster() {
if (mCustomView == null) {
return null;
}
return BitmapFactory.decodeResource(getApplicationContext().getResources(), 2130837573);
}
public void onHideCustomView() {
((FrameLayout) getWindow().getDecorView()).removeView(this.mCustomView);
this.mCustomView = null;
getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
setRequestedOrientation(this.mOriginalOrientation);
this.mCustomViewCallback.onCustomViewHidden();
this.mCustomViewCallback = null;
}
public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback) {
if (this.mCustomView != null) {
onHideCustomView();
return;
}
this.mCustomView = paramView;
this.mCustomView.setBackgroundColor(Color.BLACK);
this.mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();
this.mOriginalOrientation = getRequestedOrientation();
this.mCustomViewCallback = paramCustomViewCallback;
((FrameLayout) getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
getWindow().getDecorView().setSystemUiVisibility(3846);
this.mCustomView.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
@Override
public void onSystemUiVisibilityChange(int visibility) {
if ((visibility & View.SYSTEM_UI_FLAG_HIDE_NAVIGATION) == 0) {
updateControls(getNavigationBarHeight());
} else {
updateControls(0);
}
}
});
}
void updateControls(int bottomMargin) {
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) this.mCustomView.getLayoutParams();
params.bottomMargin = bottomMargin;
this.mCustomView.setLayoutParams(params);
}
}
int getNavigationBarHeight() {
Resources resources = getResources();
int resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android");
if (resourceId > 0) {
return resources.getDimensionPixelSize(resourceId);
}
return 0;
}
private void loadURL(WebView view, String url) {
ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo netInfo = cm.getActiveNetworkInfo();
if (netInfo != null && netInfo.isConnected()) {
view.setVisibility(View.VISIBLE);
noNetworkText.setVisibility(View.GONE);
view.loadUrl(url);
} else {
Log.d(TAG, "loadURL: no network");
view.setVisibility(View.INVISIBLE);
noNetworkText.setVisibility(View.VISIBLE);
}
}
}
Shreyash Mahajan
About Me https://about.me/sbm_mahajan Email [email protected] [email protected] Mobile +919825056129 Skype sbm_mahajan
Updated on June 24, 2020Comments
-
Shreyash Mahajan almost 4 years
I have work so many time with the webview with in Android app. But this time I got strange issue with loading YouTube video in to WebView.
See, this is the screen shot of YouTube video loaded in Chrome browser, which have full screen option in it.
Now, below is the screen shot of my app in which I have loaded same video in webview. But it is not having that full screen option.
You can see the changes in both the images. Both the screen shots are taken from same device. But still it looks different.
My code for webView loading is in this pasteboard.
Update
I have also seen that the same issue is reported here. But don't know whether is there solution for that available or not.
-
Shreyash Mahajan about 8 yearsI am direct loading url in to webview. I am not appending any iframe tag in it. So if I append it, will it work ?
-
Rohìt Jíndal about 8 yearsyes. Please try or you can do one thing.append this parameter in youtube url
?allowfullscreen=true
. -
Shreyash Mahajan about 8 yearsI have try your way. I am loading video like this way but it is not loading video. mWebView.loadUrl("<iframe src=\"youtube.com/watch?v=zxyauCOc5gs\" allowfullscreen=\"allowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" msallowfullscreen=\"msallowfullscreen\" oallowfullscreen=\"oallowfullscreen\" webkitallowfullscreen=\"webkitallowfullscreen\"> </iframe>");
-
Shreyash Mahajan about 8 yearsI got error in logcat like below: Refusing to load invalid URL: %3Ciframe%20src%3D%27https://www.youtube.com/watch?v=zxyauCOc5gs' allowfullscreen='allowfullscreen' mozallowfullscreen='mozallowfullscreen' msallowfullscreen='msallowfullscreen' oallowfullscreen='oallowfullscreen' webkitallowfullscreen='webkitallowfullscreen'> </iframe> 03
-
WideFide over 7 yearsWonder why this answer didn't get any upvote but this actually works. Only one bug, 'actionBar' gets shifted downwards. Still figuring out for solution. Thanks for this answer btw
-
Deepak Gupta over 7 yearsReally made my Day ...was searching for something like this from last 10 days, thanks @M D
-
M Tomczynski almost 7 years@WideFide have you found any solution for actionBar? I've got the same problem
-
M Tomczynski almost 7 yearsBuggy but working solution. Did those id's really had to be noname?
-
Rohit Singh almost 7 years@WideFide Can you tell me please where i need to add above two classes ? Is it in separate file ? If yes, then MainActivity is class ?
-
SARATH V over 6 yearsthanks, i've been searching for this solution 2 days. works fine. not found any action bar issue since i'm using custom theme for application.
-
aslamhossin over 6 yearsWhy not this answer is correct. This works fine for me.
-
Ghanshyam Nayma about 6 yearsshouldOverrideUrlLoading() is deprecated now
-
Micah Simmons almost 6 yearsOn the Galaxy S8 although the video would play in fullscreen the video itself didn't take up the whole screen and the letter box margin areas where transparent so you could see the layout that was being covered by the video. To add the black letter box edges add this code to the
onShowCustomView()
method:mCustomView.setBackgroundColor(Color.BLACK)
-
William T. Mallard over 5 yearsThank you so much for this! Plus, rotating the phone while playing will automatically go full screen and vice versa! It's like Christmas! I'm hoping Android gets some coal in their stockings for not making this part of the SDK.
-
jtate over 4 yearsWelcome to stackoverflow. In addition to the answer you've provided, please consider providing a brief explanation of why and how this fixes the issue.
-
nnhthuan over 4 yearsWhat does
2130837573
mean?