7

I have a Vimeo video on a page via the universal embed code:

<div class="video">
  <iframe src="http://player.vimeo.com/video/VIDEO_ID" width="100%" height="100%" frameborder="0"></iframe>
</div>

I'm using Vimeo's JavaScript API (http://vimeo.com/api/docs/player-js) to add a class to the video 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.

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 video container), which causes the iframe to overlap its parent div.

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 $('#video1').attr('width', 400); when the video is stopped, but the iframe remained unchanged (it stayed double the size).

Does anybody have any ideas of why Android does that and how can I force the iframe to resize?

Dashron
  • 3,968
  • 2
  • 14
  • 21
NightHawk
  • 3,633
  • 8
  • 37
  • 56
  • try defining your specific width of 400 within the tag itself, as far as I know, the iframe width attribute only accepts intervals like '400' or '400px' – BTC Oct 16 '13 at 14:21
  • Have you tried adding iframe {max-width:100%} to your css? – enapupe Nov 05 '13 at 21:19

0 Answers0