@Zewkin
Я у мамы фронтэндер

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

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

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

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

Image #1967472, 406.8 KB

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

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

Спасибо!
  • Вопрос задан
  • 4183 просмотра
Решения вопроса 1
flight
@flight
У меняв Chorme та-же фигня.
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 20px;
padding: 10px 0; — уберите эту строку и всё будет ок
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@dimadv7
Веду блог на тему создания landing page
Вот тут почитай: 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%;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы