digicom digicom - 1 year ago 134
Javascript Question

phonegap build embed youtube video

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:

<div class="video_embed">
<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>

The asterisk (*) represents the video id.

Please bare in mind - I'm only using phonegap build, Not CLI and not Cordova. I have no PhoneGap.plist file.

Bonus question - How can I use jQuery to change the embeded object after loading to fit the screen of my device?

Answer Source

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&amp;controls=0&amp;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.