Узнать, как создать адаптивные iframe используя HTML, CSS.
Адаптивные iframe
Создайте iframe, который сохранит соотношение сторон (4:3, 16:9 и т. д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента
описывает пропорциональное соотношение между его шириной и высотой. Два распространенных соотношения сторон видео — 4:3
(универсальный видеоформат 20-го
века) и 16:9 (универсальный для телевидения высокой четкости и европейского цифрового
телевидения, а также для видео 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 Соотношение сторон
(делим 9 на 16 = 0,5625) */
}
/* Затем стилизуем iframe так, чтобы он вписывался в контейнер
div с полной высотой и шириной */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
высота: 100%;
}
Попробуйте сами »
Другие соотношения сторон:
Пример соотношения сторон 4:3
.container {
padding-top: 75%; /*
Соотношение сторон 4:3 */
}
Попробуйте сами »
Пример соотношения сторон 3:2
.container {
padding-top: 66.66%; /*
Соотношение сторон 3:2 */
}
Попробуйте сами »
Пример соотношения сторон 8:5
.container {
padding-top: 62.5%; /*
Соотношение сторон 8:5 */
}
Попробуйте сами »
Пример соотношения сторон 1:1 (высота и ширина всегда равны)
.container {
padding-top: 100%; /*
Соотношение сторон 1:1 */
}
Попробуйте сами »