Android webview cannot render youtube video embedded via iframe

Question

This is about loading youtube videos using latest embedded format (iframe) inside a webview.

Example of the iframe embed format

<iframe width="637" height="358" src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&amp;feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Test the code on Android 2.3.3 & 3.2 devices (HTC Desire & Asus Transformer), the webview would only show a black rectangle.

I tried a similar embed from vimeo

<iframe src="http://player.vimeo.com/video/35693267" width="640" height="360" frameborder="0"></iframe>

In 2.3, video played correctly
In 3.2, a black rectangle flashed and disappeared, the iframe area is blank.

Finally if the old embed format (using the object tag) is used, the video is displayed properly inside the webview in both 2.3.3 & 3.2.

I have checked related questions and added

android:hardwareAccelerated="true"

in the application and/or activity tag but still no video in both 2.3 & 3.2 devices.

This is a big problem because more websites are now using the newest format (iframe) to embed their youtube videos. Android/Youtube Team, please take a look at this problem.

You should this answer: https://stackoverflow.com/a/24592012/2371425 as it actually solves the problem. — Sakiboy, Feb 12 '18 at 07:27

Sakiboy · Answer 1 · 2017-02-09T19:59:53.127

If you want to play videos within your WebView you NEED to load the data with a base URL!

DONT do this:

mContentWebView.loadDataWithBaseURL(null, webViewContentString,
            "text/html", "UTF-8", null);

DO THIS INSTEAD:

    //veryVeryVery important for playing the videos!
    mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString,
            "text/html", "UTF-8", null);

The Base URL will be the something like the "original" url of what you are displaying in your WebView. So let's say you are making a news reader, the WebView's base url will be the url of the original story.

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

You need to have hardware acceleration turned on in the Manifest (only available on SDK 14 and above).

Ex. 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>

avoiding loadDataWithBaseURL(...) with null base url worked for me. Thanks! — iko_wp, Jul 21 '14 at 20:40
Took me days to figure this out! I thought it would never work!! — Sakiboy, Jul 22 '14 at 03:13

score 11 · Accepted Answer · edited May 23 '17 at 12:33

11

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

edited May 23 '17 at 12:33

Community

1
1

answered Jan 28 '12 at 15:46

Mikko Ohtamaa

82,057
50
264
435

You are right. I further found out that the app would be all mess up if you rotate the device when the video is playing. I ended up using the thumbnail & link solution suggested. – littlestove Jan 31 '12 at 04:46
How do you determine what the link is to a youtube or vimeo h264 file? – cottonBallPaws Apr 24 '12 at 20:46
Check out my answer below. My answer solves the problem and is really simple. – Sakiboy Jan 06 '15 at 22:04
1

Thanks for the heads up. The original question was three years ago, so luckily Android has gone forward since then. – Mikko Ohtamaa Jan 06 '15 at 22:42

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

3

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.

http://developer.android.com/reference/android/webkit/WebView.html

(Hope it help someone)

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 29 '12 at 18:15

parser_failed

697
9
20

score 2 · Answer 4 · answered Apr 25 '16 at 13:55

This worked for me- the code opens youtube site and can play its videos inside WebView:

mWebView = (WebView) findViewById(R.id.webview);     

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 0 · Answer 5 · answered Sep 08 '15 at 07:00

This Code made exactly fit to different device

webView.setInitialScale(1);
    webView.setWebChromeClient(new WebChromeClient());

    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    int height = displaymetrics.heightPixels;
    int width = displaymetrics.widthPixels;

    Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height);

    String data_html = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /></head> <body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"> <iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"></iframe> </body> </html> ";



    webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);

score 0 · Answer 6 · answered Jan 30 '12 at 17:39

0

I would suggest using some code to detect the environment of the user... use the iframe code only for ios devices (iphone, ipod, ipad) and use the old code for everyone else.

answered Jan 30 '12 at 17:39

Rebecca

577
4
11

Android webview cannot render youtube video embedded via iframe

6 Answers6

Linked