Loading Youtube video through iframe in Android webview

Question

I want to load youtube video to Android webview using iframe

here is my layout Xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:id="@+id/mainLayout">

<WebView
    android:background="@android:color/white"
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
</RelativeLayout>

My code is:

public class WebTube extends Activity {

private WebView wv;

String html = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/WBYnk3zR0os"
            + "?fs=0\" frameborder=\"0\">\n"
            + "</iframe>";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    wv = (WebView)findViewById(R.id.webView); 
    wv.getSettings().setJavaScriptEnabled(true);
        wv.loadDataWithBaseURL("", html , "text/html",  "UTF-8", "");

     }
}

Also I provide <uses-permission android:name="android.permission.INTERNET"/>

& android:hardwareAccelerated="true"

when I run this I didn't get any result its just showing a black screen

I tried this .but this provide me video on .3gp Quality . but I need the videos from youtube on original quality. That's why I am using iframe.

I try code using <object></object> and <video></video> instead of iframe. but it didn't solve my issue.

when I run this code on emulator it shows

Before Pressing Play Button

iframe result on emulator

After Pressing Play button on video

iframe result on emulator on play button click

I think we cannot stream videos on emulator since it is a virtual device

But when I run this on phone it's not even showing this result.

I try iframe with a document attach to it works fine on phone as well as emulator

String customHtml = "<iframe src='http://docs.google.com/viewer?url=http://www.iasted.org/conferences/formatting/presentations-tips.ppt&embedded=true' width='100%' height='100%' style='border: none;'></iframe>";

So please help me to load videos to this frame.

(I run it on phone). What's the problem? also will iframe work on Android 2.1?

did any one tried Youtube Api ?

score 9 · Answer 1 · answered Apr 04 '17 at 07:42

I have full customized ifram for youtube view

public class Act_VideoPlayer extends Activity {

    WebView webView;
    ProgressBar progressBar;
    ImageView back_btn;

    String video_url = "KK9bwTlAvgo", html = "";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.full_screen_youtube_video_screen);

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

        back_btn = (ImageView) findViewById(R.id.full_videoview_btn);
            back_btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    webView.loadData("", "text/html", "UTF-8");
                    finish();
                }
            });

            webView = (WebView) findViewById(R.id.webView);
               progressBar = (ProgressBar) findViewById(R.id.progressBar);

            if (video_url.equalsIgnoreCase("")) {
                finish();
                return;
            }

            WebSettings ws = webView.getSettings();
            ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
            ws.setPluginState(WebSettings.PluginState.ON);
            ws.setJavaScriptEnabled(true);
            webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
            webView.reload();

            if (networkUtil.isConnectingToInternet(Act_VideoPlayer.this)) {
                html = getHTML(video_url);
            } else {
                html = "" + getResources().getString(R.string.The_internet_connection_appears_to_be_offline);
                CustomToast.animRedTextMethod(Act_VideoPlayer.this, getResources().getString(R.string.The_internet_connection_appears_to_be_offline));
            }

            webView.loadData(html, "text/html", "UTF-8");

            WebClientClass webViewClient = new WebClientClass(progressBar);
            webView.setWebViewClient(webViewClient);
            WebChromeClient webChromeClient = new WebChromeClient();
            webView.setWebChromeClient(webChromeClient);
    }




    @Override
    protected void onDestroy() {
        super.onDestroy();
        try {
            webView.loadData("", "text/html", "UTF-8");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        try {
            webView.loadData("", "text/html", "UTF-8");
            finish();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    public class WebClientClass extends WebViewClient {
        ProgressBar ProgressBar = null;

        WebClientClass(ProgressBar progressBar) {
            ProgressBar = progressBar;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            ProgressBar.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            ProgressBar.setVisibility(View.GONE);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            LogShowHide.LogShowHideMethod("webview-click :", "" + url.toString());
            view.loadUrl(getHTML(video_url));
            return true;
        }
    }

    public String getHTML(String videoId) {
        String html = "<iframe class=\"youtube-player\" " + "style=\"border: 0; width: 100%; height: 96%;"
                + "padding:0px; margin:0px\" " + "id=\"ytplayer\" type=\"text/html\" "
                + "src=\"http://www.youtube.com/embed/" + videoId
                + "?&theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1\fs=0\" frameborder=\"0\" "
                + "allowfullscreen autobuffer " + "controls onclick=\"this.play()\">\n" + "</iframe>\n";
        LogShowHide.LogShowHideMethod("video-id from html url= ", "" + html);
        return html;
    }

}

Is it allowed by google to show youtube videos in your app using iframe without using Youtube Api ?? — Zar E Ahmer, Feb 19 '18 at 07:56
@Nepster Yes. you can do that. i have many app on google play with iframe — tej shah, Feb 19 '18 at 08:09
Hi @tejshah, Thanks for the solution, But It is not working on Android TV, showing Video Unavailable, Watch on Youtube. Could you please help me out? Thanks a lot for your support. — Akhilesh Dhar Dubey, Sep 24 '21 at 15:18
@AkhileshDharDubey Unavailable means its some thing issue related with video id. for testing just add "8YPXv7xKh2w" this id as parameter and you can also test with phone device. its working over there? — tej shah, Sep 26 '21 at 17:12

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

8

As stated in the android Webview documentation,

HTML5 Video support

In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.

For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 15 '13 at 14:33

parser_failed

697
9
20

and when you do all of this but its still black? – atreat Mar 30 '16 at 19:37

score 2 · Answer 3 · answered Apr 25 '16 at 14:05

This worked for me:

WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

        mWebView.loadData(frameVideo, "text/html", "utf-8");

        mWebView.loadUrl("http://www.youtube.com/");


        mWebView.setWebViewClient(new WebViewClient());

score 1 · Answer 4 · answered Sep 12 '16 at 09:59

Try this its working fine..

    mWebView = (WebView) findViewById(R.id.web);
    String  videoURL = "https://www.youtube.com/embed/R52bof3tvZs";

    String vid = "<html><body style=\"margin: 0; padding: 0\"><iframe  width=\"100%\" height=\"100%\" src=\""+videoURL+"\" type=\"text/html\" frameborder=\"0\"></iframe><body><html>";

    WebChromeClient mWebChromeClient = new WebChromeClient(){
        public void onProgressChanged(WebView view, int newProgress) {
        }
    };

    mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mWebView.setWebChromeClient(mWebChromeClient);
    mWebView.setWebViewClient(new WebViewClient() {
        public void onPageFinished(WebView view, String url) {
            mWebView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");
        }
    });
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.setInitialScale(1);
    mWebView.getSettings().setLoadWithOverviewMode(true);
    mWebView.getSettings().setUseWideViewPort(true);
    if (Build.VERSION.SDK_INT < 17) {
        Log.i("GPSNETWORK", "<17");
    } else {
        Log.i("GPSNETWORK", Build.VERSION.SDK_INT+">=17");
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    String myUrl = "&lt;html&gt;&lt;body style='margin:0px;padding:0px;'&gt;\n" +
            "        &lt;script type='text/javascript' src='http://www.youtube.com/iframe_api'&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;\n" +
            "                var player;\n" +
            "        function onYouTubeIframeAPIReady()\n" +
            "        {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}\n" +
            "        function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}\n" +
            "        &lt;/script&gt;\n" +
            "        &lt;iframe id='playerId' type='text/html' width='1280' height='720'\n" +
            "        src=\""+videoURL+"\"?enablejsapi=1&amp;rel=0&amp;playsinline=1&amp;autoplay=1&amp;showinfo=0&amp;autohide=1&amp;controls=0&amp;modestbranding=1' frameborder='0'&gt;\n" +
            "        &lt;/body&gt;&lt;/html&gt;";
    mWebView.loadData(""+Html.fromHtml(myUrl), "text/html", "UTF-8");

score 0 · Answer 5 · answered Jan 07 '13 at 11:51

0

I'm no expert in Android webview, but I encountered similar problems with web page.

What I had to do was to use tag and made sure it had onclick="this.play(); in the tag. The onclick event was specifically for Android. Chrome, Safari, Firefox didn't need it.

For example:

<video id="video" width="320" height="240" autobuffer controls onclick="this.play();">

Without the onclick, Android browser would not work. Since webview is calling the browser, I suspect it's the same.

And make sure in the source tag you do NOT use codec attribute.

Hope this helps you.

answered Jan 07 '13 at 11:51

T1000

918
2
15
30

i am using videos from youtube so how should i set the source (`src=""`) for `` tag – edwin Jan 07 '13 at 12:06
On websites the src is something like: "youtube.com/watch?v=U7UroLFYlzE". – T1000 Jan 07 '13 at 23:12
1

Have you seen this? http://stackoverflow.com/questions/12708890/youtube-video-not-playing-in-webview-android – T1000 Jan 07 '13 at 23:15
It says you have to add wv.setWebChromeClient(new WebChromeClient() { }); – T1000 Jan 07 '13 at 23:15
yeah i saw that ... i tried it earlier but was not able solve my issue..in that they are using tag but it will have compatibility issue with pre ICS versions of android so prefer to use <video> tag</video> – edwin Jan 08 '13 at 03:29
so adding src= "youtube.com/watch?v=[whatever id]" didn't work? Or you don't know how to add the src tag? – T1000 Jan 09 '13 at 16:42
1

Everything works fine on an html file... but when it try to load it to android web view.. it's not working correctly.. i will check once again and inform you. – edwin Jan 10 '13 at 04:48

score 0 · Answer 6 · answered Jan 08 '13 at 12:26

0

It's not exactly a direct answer to your question, but I believe you might want to use the newly released Android Youtube API. It should allow adding youtube video playback into your apps, so you don't have to inject them into a webview in an iFrame.. That's just silly, and not all Android devices will have Flash installed :)

https://developers.google.com/youtube/android/player/

answered Jan 08 '13 at 12:26

Artiom Chilaru

11,811
4
41
52

i already check this .. when i run the demo app along with api it force me to download youtube app.. so i got a doubt id this YouTube api using official YouTube app for playing videos.. could you clarify that? – edwin Jan 08 '13 at 18:20
check [this](http://stackoverflow.com/questions/14229708/is-android-youtube-api-using-official-youtube-app) – edwin Jan 09 '13 at 08:49
Yes, I believe it does exactly that, according to the documentation on their site. – Artiom Chilaru Jan 10 '13 at 11:06

score 0 · Answer 7 · edited May 23 '17 at 12:02

0

You can visit my question again. Iv'e created a function that gives you all of the youtube video's direct links (including hq links). Now you can use mp4 and so instead of the poor 3gp.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 19 '13 at 20:26

eviabs

621
1
8
24

score 0 · Answer 8 · edited Aug 06 '15 at 07:17

0

Using WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress:

wv = setWebChromeClient(new WebChromeClient());

edited Aug 06 '15 at 07:17

Rory McCrossan

331,213
40
305
339

answered Aug 01 '15 at 14:18

morteza karamooz

21
4

3

Can you please add a little detail to your answer about what the problem in the question is, and how this solves it. – Rory McCrossan Aug 01 '15 at 14:45
Using WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress. – morteza karamooz Aug 05 '15 at 17:09

Souhardya Adhikary · Answer 9 · 2020-01-09T21:07:02.047

It's working properly

My Java file

    String path="<iframe src='https://www.youtube.com/embed/94zICkZLQpY' width='100%' height='100%' style='border: none;'></iframe>";
    webView.loadData(path,"text/html","utf-8");
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebChromeClient(new WebChromeClient());

Here 94zICkZLQpY is the embedded code you will get in any youtube video My normal youtube video link which is watchable is https://www.youtube.com/watch?v=94zICkZLQpY&feature=youtu.be

Loading Youtube video through iframe in Android webview

9 Answers9

Linked