Как сделать фрейм адаптивным?

Рейтинг: 0Ответов: 1Опубликовано: 25.02.2015

На сайт вставляется видео через фрейм с vimeo. Ширина - 100%. Как задать ширину, чтобы при изменении ширины окна высота видео менялась пропорционально?

css
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Можно так. Давно известный метод. В бутстрапе используется

.video {
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}

.video iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div class="video">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Демо

UPD. Как это работает? padding-bottom указанный в процентах будет считаться относительно ширины блока. Т.е. Если padding-bottom будет 100%, ну а height: 0, то общая высота будет равна ширине. Получится квадрат)