Android webview cannot render youtube video embedded via iframe

androidwebviewyoutube

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.

Best Answer

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

Related Solutions

Android – R cannot be resolved – Android error

After tracking down this problem as well, I found this note in the Android documentation:

http://source.android.com/source/using-eclipse.html

*Note: Eclipse sometimes likes to add an "import android.R" statement at the top of your files that use resources, especially when you ask Eclipse to sort or otherwise manage imports. This will cause your make to break. Look out for these erroneous import statements and delete them.*

While going through the Android sample tutorials, I would often use the Ctrl + Shift + O command to "Organize Imports" and generate any missing import statements. Sometimes this would generate the incorrect import statement which would hide the R.java class that is automatically generated when you build.

Php – How to get a YouTube video thumbnail from the YouTube API

Each YouTube video has four generated images. They are predictably formatted as follows:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (i.e., one of 1.jpg, 2.jpg, 3.jpg) is:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a URL similar to the HQ:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above URLs are available over HTTP too. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example URLs above.

Alternatively, you can use the YouTube Data API (v3) to get thumbnail images.

Best Answer

Related Solutions

Android – R cannot be resolved – Android error

Php – How to get a YouTube video thumbnail from the YouTube API

Related Topic