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="/**********?rel=0&controls=0&showinfo=0"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="/**********?rel=0&controls=0&showinfo=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
</div>

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?

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./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./v/**********?rel=0&controls=0&showinfo=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
</div>

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?

• javascript
• cordova
• youtube
• phonegap-plugins
• phonegap-build

2 Answers 2

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./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.

Try adding this feature parameter feature=player_embedded to the iframe URL.

Just like this:

<iframe width="640" height="360" src="http://www.youtube./embed/*********?feature=player_embedded" frameborder="0" allowfullscreen></iframe>