{"id":1858,"date":"2012-01-24T18:29:05","date_gmt":"2012-01-24T08:29:05","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1858"},"modified":"2012-08-05T12:29:25","modified_gmt":"2012-08-05T02:29:25","slug":"embed-a-youtube-video-iframe-in-phonegap-app","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/","title":{"rendered":"Embed a YouTube video iframe in a phonegap app"},"content":{"rendered":"<p>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.  <\/p>\n<p><strong>HTML:<\/strong><\/p>\n<p>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.  <\/p>\n<pre>\r\n\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;title&gt;YouTube video&lt;\/title&gt;\r\n\t\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;&quot; \/&gt;\r\n\t\t&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; \/&gt;\r\n\t\t&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot; \/&gt;\r\n\t\t&lt;script src=&quot;phonegap-1.2.0.js&quot;&gt;&lt;\/script&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n       \r\n        &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;http:\/\/www.youtube.com\/embed\/9HDeEbJyNK8&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;\/iframe&gt;\r\n        \r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Changes to PhoneGap.plist<\/strong><\/p>\n<p>Change\/add the following values in PhoneGap.plist file of your app.  <\/p>\n<pre>\r\nMediaPlaybackRequiresUserAction: NO\r\nAllowInlineMediaPlayback: YES\r\nOpenAllWhitelistURLsInWebView: YES\r\nExternalHosts\r\n          *.youtube.com\r\n          *.ytimg.com\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\" alt=\"\" title=\"phonegap.plist\" width=\"500\" height=\"313\" class=\"alignnone size-full wp-image-1859\" srcset=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg 500w, https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist-300x187.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>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).<\/p>\n<p>If you would like to get a sample phonegap project (uses jQuery mobile), you can download <a href=\"https:\/\/eisabainyo.net\/weblog\/2012\/08\/05\/phonegap-app-using-jquery-mobile\/\">PhoneGap App using jQuery Mobile<\/a> source code. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will teach you how to embed a YouTube video iframe in a phonegap<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-1858","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"This tutorial will teach you how to embed a YouTube video iframe in a phonegap\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-24T08:29:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-05T02:29:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Embed a YouTube video iframe in a phonegap app\",\"datePublished\":\"2012-01-24T08:29:05+00:00\",\"dateModified\":\"2012-08-05T02:29:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\"},\"wordCount\":179,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"image\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\",\"name\":\"Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\",\"datePublished\":\"2012-01-24T08:29:05+00:00\",\"dateModified\":\"2012-08-05T02:29:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\",\"contentUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg\",\"width\":\"500\",\"height\":\"313\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed a YouTube video iframe in a phonegap app\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/","og_locale":"en_US","og_type":"article","og_title":"Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources","og_description":"This tutorial will teach you how to embed a YouTube video iframe in a phonegap","og_url":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2012-01-24T08:29:05+00:00","article_modified_time":"2012-08-05T02:29:25+00:00","og_image":[{"url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg","type":"","width":"","height":""}],"author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Embed a YouTube video iframe in a phonegap app","datePublished":"2012-01-24T08:29:05+00:00","dateModified":"2012-08-05T02:29:25+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/"},"wordCount":179,"commentCount":0,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/","url":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/","name":"Embed a YouTube video iframe in a phonegap app | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg","datePublished":"2012-01-24T08:29:05+00:00","dateModified":"2012-08-05T02:29:25+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#primaryimage","url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg","contentUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/01\/phonegap-plist.jpg","width":"500","height":"313"},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/01\/24\/embed-a-youtube-video-iframe-in-phonegap-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Embed a YouTube video iframe in a phonegap app"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1858"}],"version-history":[{"count":9,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1858\/revisions"}],"predecessor-version":[{"id":1864,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1858\/revisions\/1864"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}