Создание сайтов в Одессе. Заказать сайт Одесса. | Веб-студия ION ☎ (068) 351-76-21

Как адаптировать видео с iframe (YouTube и Vimeo) для сайта

Рекомендуем поместить iframe в блок div с заданными пропорциями. А видео абсолютно позиционировать в этом div. Видео в iframe будет увеличиваться и уменьшаться вслед за родительским div и сохранять нормальные пропорции.

Код поставить с видео в нужное место:

<div class=”video”>

Тут код видео

</div>

Поставить в стили в файл CSS:

.video {position:relative;padding-bottom:56.25%;//padding-top:25px;height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

Стили если у Вас бутстрап 3:

@media (max-width: 767px) {
.video {
margin-left: -30px;
margin-right: -30px;
padding-top: 25px;
top: 10px;
}
}

.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:; height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}