The Intersection

Technology. Career. Entrepreneurship. Life. by Ei Sabai Nyo

24 Jan, 2012

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.

		<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>
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

Changes to PhoneGap.plist

Change/add the following values in PhoneGap.plist file of your app.

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES

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.

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

Comments are closed.

Profile PicHello! Welcome to my blog! My name is Ei Sabai and on this blog, I write about technology, career, entrepreneurship and life. I started this blog in 2005 and for a decade, the main focus of this blog was web development. I am rebranding my blog in 2016 so here is to bigger and better things (although I will always be a technologist at heart)! Read more about me or have a look at some of the tips & resources for web professionals.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book