javascript - iPhone YouTube embed with iframe - Stack Overflow

admin管理员组

文章数量:1421732

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

Share Improve this question Follow edited Apr 3, 2011 at 13:18 Black Frog 11.7k11 gold badge3737 silver badges6666 bronze badges asked Apr 3, 2011 at 11:50 deniciodenicio 56211 gold badge77 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>

本文标签： javascriptiPhone YouTube embed with iframeStack Overflow