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

Share Improve this question Follow edited Oct 5, 2015 at 15:28 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked May 2, 2014 at 7:32 digidigi 55633 gold badges88 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>