youtube videos on iphone phonegap app

iphone video youtube cordova

11,004

Solution 1

Here is a nice tutorial Which Saved my Day

http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/

Also i m posting some codes For a quick Access.

<html>
    <head>
        <title>YouTube video</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script src="phonegap-1.2.0.js"></script>
    </head>
    <body>

        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>

    </body>
</html>

Then make the following changes in Phonegap.plist

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com

Video will play on your Simulator Also.

Solution 2

Apart from using <iframe> ... </iframe> you also need to set the property OpenAllWhitelistURLsInWebView to YES in your PhoneGap.plist. This would show and play the video inside the PhoneGap application itself. It is tried and tested.

Solution 3

You could try embedding the YouTube video as an iframe, I believe that is the recommended way to do it now:

http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html

<iframe src="http://www.youtube.com/embed/VIDEO_ID" class="youtube-player" type="text/html" width="640" height="385"  frameborder="0">
</iframe>

11,004

Author by

siestetix

Updated on June 05, 2022

Comments

siestetix almost 2 years
I'm sorry to come back to this topic again, but i'm really frustrated!! I've read every resource i've found, googling around the web, but i couldn't come up with a definitive answer to my problem.

Problem description
I'm creating an iphone app with phonegap 1.0. In this app, one tab is dedicated to a rss feed from my youtube channel and i want my users to be able to play these videos, after clicking on a specific entry. Question: is it possible? best solution would be to play the video inside the app, but displaying a thumbnail image and redirecting the user to native youtube app is also acceptable (even though in this case i want the control back to the original app when youtube finishes to play the video).

Tried solutions
Searching on the web I found several solutions and people say that these solutions work for them, but none of them work for me!
- use an "object" tag, i end up with a white screen
```
<object id="video" width="296" height="100%" data="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash">
    <param name="allowfullscreen" value="true" />
    <param name="src" value="http://www.youtube.com/v/gDjb9RVMF4c" />
</object>
```
- using an "embed" tag, i end up with a white screen
```
<embed src="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="100%"></embed>
```
- i also tried a "video" tag, but as far as i understood, this is still not possible.
I'm really sorry if i missed a solution already written somewhere, but trust me ... i did my homework before askying :-) Thx!!