Как сделать - адаптивный iframe
Узнайте, как создавать адаптивные iframe с помощью CSS.
Отзывчивые фреймы
Создайте iframe, который сохранит соотношение сторон (4:3, 16:9 и т. д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента описывает пропорциональное соотношение между его шириной и высотой. Два распространенных соотношения сторон видео: 4: 3 (универсальный видеоформат 20-го века) и 16: 9 (универсальный для HD-телевидения и европейского цифрового телевидения, а также для видео на YouTube).
Как сделать — адаптивные фреймы
Шаг 1) Добавьте HTML:
Используйте элемент-контейнер, например <div>, и добавьте в него iframe:
Пример
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Шаг 2) Добавьте CSS:
Добавьте процентное значение padding-top
, чтобы сохранить соотношение сторон контейнера DIV. В следующем примере будет создано соотношение сторон 16:9, которое является соотношением сторон по умолчанию для видео на YouTube.
Пример 16:9 Соотношение сторон
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Другие соотношения сторон:
Пример 4:3 Соотношение сторон
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Пример 3:2 Соотношение сторон
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Пример 8:5 Соотношение сторон
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Пример 1:1 Соотношение сторон (высота и ширина всегда равны)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}