I'm trying to embed a youtube video on a phonegap build app.
I have a page that shows the video's title and description and below them the video's embed.
On my browser it works great, but on my device it doesn't show the video it all. It's there, just not seeing anything (not black screen).
I'm using the following code to embed it:
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/**********?rel=0&controls=0&showinfo=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/**********?rel=0&controls=0&showinfo=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
I got them both figured out eventually (including the bonus question...)
First add this to your head section of the page:
<meta name="viewport" content="width=device-width, user-scalable=no">
Then use the following iFrame include from YouTube to insert the video:
<iframe width="100%" height="215" src="http://www.youtube.com/embed/**********?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
Replace the asterisk(*) with your video code.
It's very important that you set the iFrame width to 100% or it will mess up your entire page.
That works perfectly.
The only problem is setting the iFrame height, but that will have to be figured out next time.