Как создать: Респонсивные Iframe

Узнайте, как использовать CSS для создания респонсивных iframe.

Респонсивные iframe

Создайте iframe, который сохраняет пропорцию ширины и высоты (4:3, 16:9 и т.д.) при изменении размера:

Что такое пропорция ширины и высоты?

Пропорция ширины и высоты элемента описывает соотношение между его шириной и высотой. Два常见的 соотношения ширины и высоты для видео - 4:3 (стандартный формат видео 20 века) и 16:9 (стандартный формат для HD-телевидения и цифрового телевидения в Европе, а также для видео YouTube).

Как сделать - Респонсивные Iframes

Шаг 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%;
  height: 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 пропорция ширины и высоты */
}

Попробуйте сами