title: iframe doesn't resize on android 2.3.6
body: <p>I have a Vimeo video on a page via the universal embed code:</p>
  
  <pre><code>&lt;div class="video"&gt;
    &lt;iframe src="http://player.vimeo.com/video/VIDEO_ID" width="100%" height="100%" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using Vimeo's JavaScript API (<a href="http://vimeo.com/api/docs/player-js" rel="nofollow">http://vimeo.com/api/docs/player-js</a>) to add a class to the <code>video</code> div (that doubles the div) for when the video starts playing, and when the video is paused or finishes, the class is removed, resetting the video player size to its original size.</p>
  
  <p>This works as expected on a desktop/laptop (Firefox), but on an Android phone, the iframe (once it doubles its size) doesn't return to its previous size (it's a percentage, so it should adapt to its <code>video</code> container), which causes the iframe to overlap its parent div.</p>
  
  <p>First I thought it was the 100% width and height of the iframe, so I specified a fixed width and height for the iframe using <code>$('#video1').attr('width', 400);</code> when the video is stopped, but the iframe remained unchanged (it stayed double the size).</p>
  
  <p>Does anybody have any ideas of why Android does that and how can I force the iframe to resize?</p>