Android Webview Cannot Render Youtube Video Embedded via Iframe

Android webview cannot render youtube video embedded via iframe

Android browsers are utterly buggy what comes to video playback and embedding. It simply does not work across devices. Trying to get it working is just waste of your time. My suggestion is that you don't try to include <iframe> but simply provide a thumbnail of the video which directly links to YouTube page or h264 file.

Earlier discussion, with a possible solution.

Google Reader-esque optimizing of WebViews on Android

Loading Youtube video through iframe in Android webview

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.

Play youtube/vimeo video embedded in HTML in Android WebView

So after a couple of days tinkering with this I FINALLY found the solution to my problem!

If you want to play <iframe ../> videos within your WebView you NEED to load the data with a base URL! This baseURL should be the URL of where the video is embedded, or anything to help indicate where the video can be found.

DONT do this:

// You need to give a baseUrl (e.g. the corresponding url of the HTML String)
webview.loadDataWithBaseURL(null, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

DO THIS INSTEAD:

    /*
     VERY important to supply a baseURL for playing the videos!
     Without a baseUrl the WebView has no idea where to look for the video.
     The baseUrl will typically just be the URL that corresponds to the 
     HTML String that you are using.
    */
    mContentWebView.loadDataWithBaseURL(baseUrlOfHtmlContent, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

Good Luck!

Also remember to set up your WebView...Like so...

    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.getSettings().setJavaScriptEnabled(true);

TIP: May need to turn "hardware acceleration” on in the Manifest for this to work.

Example Hardware Acceleration On:

<application
    android:name="com.example.app"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>

Cannot play video inside WebView using iframe tag?

The key thing is to enable browser plugins.

// how to enable the webview plugin changed in API 8
if (Build.VERSION.SDK_INT < 8) {
    mWebView.getSettings().setPluginsEnabled(true);
} else {
    mWebView.getSettings().setPluginState(PluginState.ON);
}

Also worth checking flash player is installed

How to show YouTube video in webView on Android

Try the following code: Change the URL of video in the string.

String frameVideo = "<html><body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/47yJ2XCRLZs\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

    WebView displayYoutubeVideo = (WebView) findViewById(R.id.mWebView);
    displayYoutubeVideo . setWebViewClient ( New  WebViewClient () {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    WebSettings webSettings = displayYoutubeVideo . getSettings ();
    webSettings.setJavaScriptEnabled(true);
    displayYoutubeVideo.loadData(frameVideo, "text/html", "utf-8");

Android Webview Cannot Render Youtube Video Embedded via Iframe