Адаптивная верстка, Youtube и iPhone

Question

[Сева]

Добрый день, господа.

Делаю тестовое задание. Один из пунктов — вставить страницу видео с youtube, чтобы его размер изменялся в зависимости от размера экрана.
В десктопных браузерах работает замечательно при любом размере окна.

В бразере iPhone получается следующее —



(полный размер по клику).

В чем может быть причина?
Код —

Спасибо!

Comments

[Сева]

Код — dl.dropboxusercontent.com/u/31034980/test/index.html

Answer 1

[Дмитрий Давыдов]

Вот тут почитай: smartlanding.biz/adaptivnoe-youtube-video.html
Там подробно, а если быстро, то:

<div class="videoWrapper">;
   <iframe width="560" height="315" src="https://www.youtube.com/embed/ELYrAPHxEuI" frameborder="0" allowfullscreen&gt;&lt;/iframe>
</div>

А в css:

.videoWrapper{
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
 
.videoWrapper iframe,.videoWrapper object, .videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}