Responsive iFrame

youtube

Как сделать отзывчивый iframe шириной 100%, например YouTube видео? Было бы неплохо, если бы мы могли просто дать ему ширину 100%, но это не будет работать, так как высота останется фиксированной. Ниже показан способ вставки который можно применить к большинству iframe.
Вот типичный YouTube-код для вставки с фиксированной шириной и высотой:

<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen></iframe>

Ключ к созданию отзывчивого iframe заключается в обертке, iframe нужно обернуть в контейнер:

<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

И использовать следующую CSS:

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Как это работает: Контейнер имеет нулевую высоту и нижний padding в процентах, который представляет собой процент от ширины контейнера, так мы имитируем соотношение сторон нашего iframe (aspect ratio). Учитывая, что высота контейнера равна нулю, то содержимое контейнера не видно. Для отображения нашего содержимого нам необходимо контейнеру прописать относительное позиционирование, а iframe абсолютное.
Вот результат:

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *