Any idea why no matter what height i assign to the iframe, it doesn't resize? I'm testing this on an iPhone (on desktop browser it resizes correctly).

<iframe width="320" height="180" src="" frameborder="0"></iframe>

Any idea why no matter what height i assign to the iframe, it doesn't resize? I'm testing this on an iPhone (on desktop browser it resizes correctly).

<iframe width="320" height="180" src="http://www.youtube./embed/wwbKu0mznf4" frameborder="0"></iframe>

• javascript
• iphone
• html
• mobile-safari
• youtube-api

3 Answers 3

Try adding scrolling="no".

<iframe scrolling="no" src="..." width="320" height="180"></iframe>

When you rewrite the height with javascript use a %. Not sure why but it seems to be the only thing that works. A good number to start with is height="20%"

Here is what I've been using.

/* patch Ipad Youtube */ 
var agent = navigator.userAgent.toLowerCase(); 
var patchApple = (agent.indexOf('iphone')!=-1) || (agent.indexOf('ipad')!=-1);

if (patchApple) { $('iframe').css({ 'height':'20%' }); }

iPhone doesn't support iframe height attribute. Try putting the iFrame in a div like this:

.scroll {
  height:200px;
  width:200px;
  overflow:auto;
}


<div class="scroll">content</div>