I figured this out if anyone is interested. I posted this as a response to an open bug report, but I thought I should post this here too.
This method involves using an iframe in which youtube will render the video in an HTML5 player for browsers that support it - the iPhone seems to work fine with this (I haven’t tested this on an iPad). There are some limitations like videos with ads or annotation (or whatever MysteryGuitarMan does at the end of his videos) don’t work.
The best part… After playing the video or pressing the “Done” button in the video player, you are taken back to your app!!!
A couple caveats before I show you how it works… it uses showWebpopup and for some reason webpopups dont rotate very nicely - they rotate but keep the same width and height. You can see it in my example below if you reduce the height of the webpopup (I have it set to 300x300 to avoid the problem). The video thumbnail is 300x180, so by making the webpopup window 300x300 you lose 120 pixels of height (I made the background white so you can see it). To make it look nice you can make the html page background black (#000000) in the CSS. Oh yeah, this only works in the Xcode Simulator.
Here’s the code:
build.settings - loads in portrait and can rotate to both landscape modes
settings =
{
orientation =
{
default = "portrait",
supported =
{
"landscapeLeft", "landscapeRight", "portrait"
},
},
}
localpage.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>list test</title>
<meta name="viewport" content="width=200; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<style type="text/css"><br>* {margin:0;padding:0;}<br>body {<br>margin:0;<br>padding:0;<br>background-color:#ffffff;<br>/* make the background the same color as the app background to hide the webpopup background */<br>/*background-color:#000000;*/<br>}<br></style>
<iframe class="youtube-player" type="text/html" width="300" height="180" src="http://www.youtube.com/embed/M3hlXh4bdYk" frameborder="0"></iframe>
[/html]
main.lua
-- main.lua
local test = display.newText("Ansca, please fix the webPopup", 35, 40, "Courier", 14)
test:setTextColor(255, 255, 255, 255)
local test2 = display.newText(" rotation issue!", 25, 56, "Courier", 14)
test2:setTextColor(255, 255, 255, 255)
local test3 = display.newText("please... :)", 60, 90, "Courier", 30)
test3:setTextColor(255, 255, 255, 255)
local options = { hasBackground=false, baseUrl=system.ResourceDirectory }
native.showWebPopup( 10, 150, 300, 300, "localpage.html", options )
[import]uid: 8194 topic_id: 1683 reply_id: 6031[/import]