Embed a YouTube video iframe in a phonegap app
This tutorial will teach you how to embed a YouTube video iframe in a phonegap app. In this tutorial, I am using phonegap version 1.2.0. Youtube will automatically convert the flash video into HTML5 video tag so you don’t have to worry about encoding the video.
Go to YouTube and get embed code for the video that you wish to include into your phonegap app. Note that not all YouTube videos can be played from a phonegap app due to restrictions placed in the videos.
<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>
Changes to PhoneGap.plist
Change/add the following values in PhoneGap.plist file of your app.
MediaPlaybackRequiresUserAction: NO AllowInlineMediaPlayback: YES OpenAllWhitelistURLsInWebView: YES ExternalHosts *.youtube.com *.ytimg.com
And that’s it! You should now be able to run the app on Simulator or an iOS device and be able to play the youtube video using the default video player that comes with the device (for example, QuickTime player for iPhone and iPad).
If you would like to get a sample phonegap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.
Other similar posts that you might be interested in:
- Code to embed Google Map and Street View
- Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part II
- Creating a Contact Form in jQuery Mobile and PHP
- A sample PhoneGap App using jQuery Mobile
- Click to copy and open site script
- Making a website iPhone-friendly using CSS