Embed Youtube video inside an Android app

Asked 12/6, 2013 at 18:13 Answered 2/3, 2019 at 20:11

android youtube android-webview android-youtube-api

I'm using a WebView for displaying embedded Youtube video and that works on Galaxcy S2 (OS 2.3.5) and doesn't on Nexus S (OS 2.3.4), all I get is white screen without any video display.

Here is the code snippet I'm using and the declarations in Manifest file:

private WebView wv;

private void setWebView()
{
wv = (WebView) findViewById(R.id.webView);

wv.setWebChromeClient(new WebChromeClient());

wv.getSettings().setPluginState(WebSettings.PluginState.ON);

wv.setWebViewClient(new WebViewClient()); 

wv.getSettings();

wv.setBackgroundColor(0x00000000);

wv.setKeepScreenOn(true);

wv.setHorizontalScrollBarEnabled(false);
wv.setVerticalScrollBarEnabled(false);

wv.getSettings().setBuiltInZoomControls(true);

final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML();

wv.loadDataWithBaseURL("", html, mimeType, encoding, "");

}


public String getHTML()
{

String html = "<html>"

    + "<head>"
 + "</head>"
 + "<body style=\"border: 0; padding: 0\">"
 + "<iframe "
 + "type=\"text/html\" "
 + "class=\"youtube-player\" "
 + "width= 100%\""
 + "\" "
 + "height= 95%\""
 + "\" "
 + "src=\"http://www.youtube.com/v/"
 + selected_video 
    + "?controls=0&showinfo=0&showsearch=0&modestbranding=0" +
 "&autoplay=1&fs=1&vq=hd720\" " + "frameborder=\"0\"></iframe>" 
    + "</body>"
    + "</html>";

 return html;
}

Note: the parameter "selected_video" is the hash of the video (VideoID).

The declarations in Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=http://schemas.android.com/apk/res/android
.
.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"  />

<application
   .
   .
    android:hardwareAccelerated="true"  >

    .
    .

Please let me know in case you recognizing anything I should change in my code, or help with a complete code which can support all Android devices and OS for displaying embedded (In-App) Youtube video with high quality.

UPDATE: Pay attention, the solution I'm looking for should display high resolution video. I got it work on the different devices and OS using VideoView class but the video quality isn't good enough. So any solution including VideoView or WebView or any other way will be accepted only if it makes high quality YouTube video to be displayed. Thanks to all the responders!

Wirehaired answered 12/6, 2013 at 18:13 Comment(7)

I'm not sure but it could be flash prob, Flash is installed in Nexus S ??? #5791535 – Schock 13/6, 2013 at 13:32

I could use other apps that does the same on my Nexus S. I don't want flash to be a must to use the app... – Wirehaired 13/6, 2013 at 14:30

I mean I think it does not work because Youtube requires Flash, please check if the devices can browse the YouTube site and watch movies? and Let me know the result (do not try YouTube app just youtube site) maby ather app use, youtube android player? developers.google.com/youtube/android/player – Schock 13/6, 2013 at 15:2

I can see a movie on youtube site without using the app. – Wirehaired 13/6, 2013 at 15:14

webview.getSettings().setPluginsEnabled(true); is a deprecated method try targeting min SDK version 8 (2.2) and setting webview.getSettings().setPluginState(WebSettings.PluginState.ON); – Schock 13/6, 2013 at 16:7

But this is exactly what I did... – Wirehaired 13/6, 2013 at 20:51

As hinted by: #9036915 it may not be possible. Have you looked at: developers.google.com/youtube/android/player – Devitrify 24/6, 2013 at 3:49

there is an official YouTube Android Player API wich you can use. This is a bit more complicated but it is working better than other solutions using webclients.

First you must register your app in Googles API Console. This is completely free until your app gets over 25k request a month (or something like that). There are complete anf great tutorials under the link. I hope you can understand them. If not, ask! :)

Imperfective answered 27/6, 2013 at 17:35 Comment(5)

Thanks! How silly of me i couldn't find there's an API for youtube. Lol – Monah 1/3, 2014 at 14:12

Youtube android player api require youtube app installed and google play service, but Embed Youtube video for run on every device – Filmy 30/10, 2014 at 12:22

stackoverflow.com/q/67406221/13146544 please help me if possible.. The time bar in Minimal player style is not working. – Whiteman 6/5, 2021 at 7:9

Be cereful with YouTube Android Player API. It will be deprecated after May 1, 2023. – Jaco 7/3, 2023 at 10:22

how to remove/hide next and previous button using iframe in android? i am refering #58856120 but it is not helpful for android. – Pietra 31/3, 2023 at 8:25

How it looks:

Best solution to my case. I need video fit web view size. Use embed youtube link with your video id. Example:

WebView youtubeWebView; //todo find or bind web view
String myVideoYoutubeId = "-bvXmLR3Ozc";

youtubeWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });

WebSettings webSettings = youtubeWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);

youtubeWebView.loadUrl("https://www.youtube.com/embed/" + myVideoYoutubeId);

WebView xml code

<WebView
        android:id="@+id/youtube_web_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

Picard answered 11/6, 2018 at 13:27 Comment(0)

although I suggest to use youtube api or call new intent and make the system handle it (i.e. youtube app), here some code that can help you, it has a call to an hidden method because you can't pause and resume webview

import java.lang.reflect.Method;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

import android.app.Activity;

@SuppressLint("SetJavaScriptEnabled")
public class MultimediaPlayer extends Activity
{
    private WebView mWebView;
    private boolean mIsPaused = false;

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

        String media_url = VIDEO_URL;

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebChromeClient(new WebChromeClient());

        WebSettings ws = mWebView.getSettings();
        ws.setBuiltInZoomControls(true);
        ws.setJavaScriptEnabled(true);

        mIsPaused = true;
        resumeBrowser();
        mWebView.loadUrl(media_url);
    }

    @Override
    protected void onPause()
    {
        pauseBrowser();
        super.onPause();
    }

    @Override
    protected void onResume()
    {
        resumeBrowser();
        super.onResume();
    }

    private void pauseBrowser()
    {
        if (!mIsPaused)
        {
            // pause flash and javascript etc
            callHiddenWebViewMethod(mWebView, "onPause");
            mWebView.pauseTimers();
            mIsPaused = true;
        }
    }

    private void resumeBrowser()
    {
        if (mIsPaused)
        {
            // resume flash and javascript etc
            callHiddenWebViewMethod(mWebView, "onResume");
            mWebView.resumeTimers();
            mIsPaused = false;
        }
    }

    private void callHiddenWebViewMethod(final WebView wv, final String name)
    {
        try
        {
            final Method method = WebView.class.getMethod(name);
            method.invoke(mWebView);
        } catch (final Exception e)
        {}
    }
}

Layer answered 28/6, 2013 at 23:48 Comment(0)

It works like this:

String item = "http://www.youtube.com/embed/";

String ss = "your url";
ss = ss.substring(ss.indexOf("v=") + 2);
item += ss;
DisplayMetrics metrics = getResources().getDisplayMetrics();
int w1 = (int) (metrics.widthPixels / metrics.density), h1 = w1 * 3 / 5;
wv.getSettings().setJavaScriptEnabled(true);
wv.setWebChromeClient(chromeClient);
wv.getSettings().setPluginsEnabled(true);

try {
    wv.loadData(
    "<html><body><iframe class=\"youtube-player\" type=\"text/html5\" width=\""
    + (w1 - 20)
    + "\" height=\""
    + h1
    + "\" src=\""
    + item
    + "\" frameborder=\"0\"\"allowfullscreen\"></iframe></body></html>",
                            "text/html5", "utf-8");
} catch (Exception e) {
    e.printStackTrace();
}

private WebChromeClient chromeClient = new WebChromeClient() {

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        if (view instanceof FrameLayout) {
            FrameLayout frame = (FrameLayout) view;
            if (frame.getFocusedChild() instanceof VideoView) {
                VideoView video = (VideoView) frame.getFocusedChild();
                frame.removeView(video);
                video.start();
            }
        }

    }
};

Nave answered 25/6, 2013 at 6:49 Comment(2)

This code doesn't compile (metrics should be Metrics). What should be on "your url" exactly? can you provide a better example? – Wirehaired 29/6, 2013 at 13:3

What does this line exactly do? frame.removeView(video); – Guile 27/4, 2020 at 8:12

The video quality depends upon the Connection speed using API

alternatively for other than API means without YouTube app you can follow this link

Biomedicine answered 17/7, 2013 at 20:39 Comment(0)

Pretty simple: Just put it inside a static method.

startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(linkYouTube)));

Fake answered 2/3, 2019 at 20:11 Comment(0)

Recommended topics

Hot tags