Loading Youtube video through iframe in Android webview

play youtube video in webview android
android webview full screen iframe video
play video in webview android
android webview iframe not working
play youtube video in popup window android
how to stop youtube video playing in android webview
android webview video
youtube iframe events

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

After Pressing Play button on video

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 ?

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.

How to play YouTube videos in an Android WebView with just a few , YouTube has an official Player API for Android, to play videos in a But you can't just load a page from YouTube in your WebView. The best way to play YouTube videos on the web is to use the IFrame Player API, from  In other to use the WebView to play our video rather than going to the external website, we created a WebView client to replace the default WebView client of the WebView. With the WebView web settings, we enabled Javascript and load the video iFrame string to the webview instance by using the loaddata() of the WebView.

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

}

How To Embed YouTube Video In Android WebView – CodestringZ, Step 3: Load YouTube Video From Activity. To load YouTube video, Modify the activity as follows. i've a problem to playing youtube video on a WebView. It's all day i reading question and answer on how to do this, but it doesn't work. I've already set the Manifest and this is the code i'm using

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

Embed and Play YouTube Video in Android WebView, In this android tutorial we are going to learn how to embed and play Youtube Javascript and load the video iFrame string to the webview instance by using the​  YouTube has an official Player API for Android, to play videos in a native player. But this API has a few limitations, as explained in this post. The best way to go around those limitations is to…

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

Embed YouTube Video In Android WebView (Demo), This is about loading youtube videos using latest embedded format (iframe) inside a webview. Example of the iframe embed format <iframe width="637"  YouTube, using the YouTube Android Player API. We’ll display this video using Android’s VideoView class, and provide the user with a set of media controls, via Android’s MediaController

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.

Android webview cannot render youtube video embedded via iframe , EMBED AND PLAY YOUTUBE VIDEO IN ANDROID WEBVIEW where you want to add an embed video in your android applications with some text in android. String embedString ="<iframe width=\"560\" height=\"315\"  The html page is loading *well*, also the are displayed the video with its border and the typical Youtube-Play-Button in the center of the video. But when I press it, the video doesn't * load *. This is the htm content:

EMBED AND PLAY YOUTUBE VIDEO IN ANDROID WEBVIEW , Until i click on play button. Video start load all native buttons Our app runs the youtube video using the iframe API. The app I uploaded was a trivial PoC Similar problems seem to exist in native Android Java WebView:  Tutorial how to use WebView to get data from website in Android Studio version 1.5.1, step by step. Create New Project with Application name: WebView. Minimum SDK: API 10 – Android 2.3.3

Videos in iFrame do not work in webview · Issue #172 · react-native , When I click on it. It load the first Image only but then It is not Playing. I tried to play on the android browser, it works smoothly but not in the webView  In this Android Studio video i want to show Playing of YouTube Videos In WebView Of Android Studio, by watching this video you will be able to watch YouTube Videos via your Android applications

Play Youtube HTML5 embedded Video in Android WebView , This doesn't successfully load the YouTube iframe API, so no video window appears at all. Here is the code I'm using for simple verification: var webView:  For the Love of Physics - Walter Lewin - May 16, 2011 - Duration: 1:01:26. Lectures by Walter Lewin. They will make you ♥ Physics. Recommended for you

Comments
  • and when you do all of this but its still black?
  • where's the quick code?
  • Is it allowed by google to show youtube videos in your app using iframe without using Youtube Api ??
  • @Nepster Yes. you can do that. i have many app on google play with iframe
  • i am using videos from youtube so how should i set the source (src="") for <video></video> tag
  • On websites the src is something like: "youtube.com/watch?v=U7UroLFYlzE".
  • Have you seen this? stackoverflow.com/questions/12708890/…
  • It says you have to add wv.setWebChromeClient(new WebChromeClient() { });
  • 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.
  • 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?
  • check this
  • Yes, I believe it does exactly that, according to the documentation on their site.
  • Can you please add a little detail to your answer about what the problem in the question is, and how this solves it.
  • Using WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress.