Адаптивное видео на лендинге
Мы выпустили еще один лендинг для продающий курсы по планированию для мам. Тренинг полезный с акцентом на энергию и время выбрано удачно, как раз перед новым годом.
Страница получилась длинной, но интересной. Много поработали над структурой, сильно переработали блок цен.
Когда стали просматривать на мобильной версии – не понравилось, как выглядит видео вставленное с youtube. По умолчанию задается фиксированный размер, который просто не вмещается полностью в экран мобильного телефона.
Само видео вставляется с youtube вот таким кодом
<iframe width="640" height="360" src="https://www.youtube.com/embed/MSo9dc40EYc?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
Чтобы видео стало адаптивным, нужно упаковать этот код в div с классом, например, myadvideo. При этом меняем значения высоты и ширины на auto.
<div class="myadvideo">
<iframe width="auto" height="auto" src="https://www.youtube.com/embed/MSo9dc40EYc?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
А затем прописать в файле стиля
.myadvideo{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.myadvideo iframe, .myadvideo object, .myadvideo embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
После этого ваше видео будет вписывать в экран любого размера.