CODEWITHSUNDEEP
iphonevideoyoutubecordova
siestetix
siestetix

Reputation: 63

youtube videos on iphone phonegap app

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!

I'm really sorry if i missed a solution already written somewhere, but trust me ... i did my homework before askying :-) Thx!!

Upvotes: 2

Views: 11136

Answers (4)

kravc
kravc

Reputation: 593

Here is a component I've end up using in my app. Done with a help of YouTube iFrame API.

Upvotes: 0

Siba Prasad Hota
Siba Prasad Hota

Reputation: 4789

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.

Upvotes: 5

Samyak Bhuta
Samyak Bhuta

Reputation: 1254

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.

Upvotes: 4

Lars Bl&#229;sj&#246;
Lars Bl&#229;sj&#246;

Reputation: 6127

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>

Upvotes: 3

Related Questions