Отзывчивые медиа (видео, iframe): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

На этой странице собраны задания для тренировки навыков создания отзывчивых медиа-элементов, таких как видео и iframe. Вы научитесь делать так, чтобы медиаконтент корректно масштабировался и отображался на экранах различных размеров, сохраняя при этом свои пропорции. Задания варьируются от базового масштабирования до техник сохранения соотношения сторон.

Список тем

Базовая отзывчивость для видео

Сделайте так, чтобы видеоплеер не выходил за пределы своего контейнера и масштабировался по ширине, сохраняя пропорции. Видео должно занимать всю доступную ширину контейнера.

CSS

.video-container video {
  display: block; /* Убирает лишний отступ под видео */
  input1: 100%;
  input2: auto;
}

                     .video-container video {
  display: block; /* Убирает лишний отступ под видео */
  input1: 100%;
  input2: auto;
}

HTML

<div class="video-container">
  <video controls src="#" poster="https://naytikurs.ru/img/1.png">
    <!-- Добавьте реальный src для видео, если нужно -->
    Ваш браузер не поддерживает тег video.
  </video>
</div>

Чтобы элемент масштабировался по ширине контейнера, используйте свойство `max-width` со значением `100%`. Чтобы высота подстраивалась автоматически, сохраняя пропорции, используйте свойство `height` со значением `auto`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Базовая отзывчивость для iframe

Сделайте встроенный фрейм (iframe) отзывчивым. Он должен масштабироваться по ширине родительского контейнера, не выходя за его пределы, и автоматически подстраивать свою высоту.

CSS

.iframe-container input1 {
  display: block;
  input2: 100%;
  /* height: auto; может не дать ожидаемого результата для iframe */
  /* Для демонстрации масштабирования ширины */
  border: none; /* Уберем рамку по умолчанию */
}

                     .iframe-container input1 {
  display: block;
  input2: 100%;
  /* height: auto; может не дать ожидаемого результата для iframe */
  /* Для демонстрации масштабирования ширины */
  border: none; /* Уберем рамку по умолчанию */
}

HTML

<div class="iframe-container">
  <iframe src="/" width="600" height="400" style="border:1px solid #ccc;">
    Ваш браузер не поддерживает iframe.
  </iframe>
</div>

Как и для других медиа-элементов, используйте `max-width: 100%` для ограничения ширины и `height: auto` для автоматической подстройки высоты. Однако учтите, что `height: auto` для iframe может работать не всегда предсказуемо без дополнительных техник или JavaScript, но для базового масштабирования это первый шаг.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение пропорций видео (Padding Hack)

Используя классический метод 'padding hack', сделайте так, чтобы видео сохраняло соотношение сторон 16:9 при изменении ширины контейнера. Видео должно полностью заполнять обертку.

CSS

.video-wrapper-16-9 {
  input1: relative;
  width: 100%;
  height: 0;
  input2: 56.25%; /* 9 / 16 * 100% */
  overflow: hidden;
}

.video-wrapper-16-9 video {
  input3: absolute;
  input4: 0;
  input5: 0;
  width: 100%;
  height: 100%;
}

                     .video-wrapper-16-9 {
  input1: relative;
  width: 100%;
  height: 0;
  input2: 56.25%; /* 9 / 16 * 100% */
  overflow: hidden;
}

.video-wrapper-16-9 video {
  input3: absolute;
  input4: 0;
  input5: 0;
  width: 100%;
  height: 100%;
}

HTML

<div class="video-wrapper-16-9">
  <video controls poster="https://naytikurs.ru/img/2.png">
    Ваш браузер не поддерживает тег video.
  </video>
</div>

Создайте обертку для видео. Задайте ей `position: relative`, `height: 0` и `padding-bottom` в процентах, равный (высота / ширина) * 100%. Для 16:9 это (9 / 16) * 100% = 56.25%. Самому видео задайте `position: absolute`, `top: 0`, `left: 0`, `width: 100%` и `height: 100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение пропорций iframe 4:3 (Padding Hack)

Аналогично предыдущему заданию, но для iframe. Заставьте iframe сохранять соотношение сторон 4:3 при масштабировании, используя 'padding hack'.

CSS

.iframe-wrapper-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  input1: 75%; /* 3 / 4 * 100% */
  overflow: hidden;
}

.iframe-wrapper-4-3 input2 {
  position: absolute;
  top: 0;
  left: 0;
  input3: 100%;
  input4: 100%;
  border: none;
}

                     .iframe-wrapper-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  input1: 75%; /* 3 / 4 * 100% */
  overflow: hidden;
}

.iframe-wrapper-4-3 input2 {
  position: absolute;
  top: 0;
  left: 0;
  input3: 100%;
  input4: 100%;
  border: none;
}

HTML

<div class="iframe-wrapper-4-3">
  <iframe src="/" title="Пример iframe">
    Ваш браузер не поддерживает iframe.
  </iframe>
</div>

Техника та же, что и для видео. Обертке задайте `position: relative`, `height: 0`, `overflow: hidden`. Рассчитайте `padding-bottom` для соотношения 4:3: (3 / 4) * 100% = 75%. Самому iframe задайте `position: absolute`, `top: 0`, `left: 0`, `width: 100%`, `height: 100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение пропорций видео (aspect-ratio)

Используйте современное CSS свойство `aspect-ratio`, чтобы видео сохраняло соотношение сторон 16:9 без использования 'padding hack'. Видео должно занимать всю ширину контейнера.

CSS

.video-container-modern video {
  display: block;
  width: 100%;
  input1: input2;
  object-fit: cover; /* Добавим для лучшего вида, если видео не точно 16:9 */
}

                     .video-container-modern video {
  display: block;
  width: 100%;
  input1: input2;
  object-fit: cover; /* Добавим для лучшего вида, если видео не точно 16:9 */
}

HTML

<div class="video-container-modern">
  <video controls poster="https://naytikurs.ru/img/4.png">
    Ваш браузер не поддерживает тег video.
  </video>
</div>

Задайте видео элементу свойство `width: 100%` (или `max-width: 100%`) и свойство `aspect-ratio` со значением, представляющим соотношение ширины к высоте. Для 16:9 это `16 / 9`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение пропорций iframe (aspect-ratio)

Используйте свойство `aspect-ratio`, чтобы iframe сохранял соотношение сторон 16:9. Iframe должен масштабироваться по ширине контейнера.

CSS

.iframe-container-modern input1 {
  display: block;
  input2: 100%;
  input3: 16 / 9;
  border: none;
  height: auto; /* Переопределяем возможную высоту из атрибута */
}

                     .iframe-container-modern input1 {
  display: block;
  input2: 100%;
  input3: 16 / 9;
  border: none;
  height: auto; /* Переопределяем возможную высоту из атрибута */
}

HTML

<div class="iframe-container-modern">
  <iframe src="/" title="Пример iframe 16:9">
    Ваш браузер не поддерживает iframe.
  </iframe>
</div>

Аналогично видео, задайте iframe свойство `width: 100%` (или `max-width: 100%`) и `aspect-ratio` со значением `16 / 9`. Убедитесь, что у iframe нет фиксированных атрибутов `width` и `height` в HTML, или переопределите их в CSS.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Масштабирование фонового видео

Сделайте так, чтобы видео, используемое как фон секции, полностью покрывало эту секцию без пустых полей, сохраняя при этом свои пропорции (возможно, обрезаясь). Секция имеет фиксированную высоту.

CSS

.hero-section {
  position: relative;
  height: 300px; /* Фиксированная высота для примера */
  overflow: hidden;
  background-color: #333; /* Фон на случай, если видео не загрузится */
}

.hero-section video {
  input1: absolute;
  input2: 50%;
  input3: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Помещаем видео под контент */
  input4: translate(-50%, -50%);
  object-fit: cover;
}

.hero-content {
  position: relative; /* Чтобы был над видео */
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 100px;
}

                     .hero-section {
  position: relative;
  height: 300px; /* Фиксированная высота для примера */
  overflow: hidden;
  background-color: #333; /* Фон на случай, если видео не загрузится */
}

.hero-section video {
  input1: absolute;
  input2: 50%;
  input3: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Помещаем видео под контент */
  input4: translate(-50%, -50%);
  object-fit: cover;
}

.hero-content {
  position: relative; /* Чтобы был над видео */
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 100px;
}

HTML

<section class="hero-section">
  <video autoplay muted loop playsinline poster="https://naytikurs.ru/img/5.png">
    <!-- <source src="your-video.mp4" type="video/mp4"> -->
    Ваш браузер не поддерживает фоновое видео.
  </video>
  <div class="hero-content">
    <h1>Заголовок поверх видео</h1>
  </div>
</section>

Для контейнера задайте `position: relative` и `overflow: hidden`. Видео поместите внутрь, задайте ему `position: absolute`, `top: 50%`, `left: 50%`. Чтобы оно покрывало контейнер, используйте `min-width: 100%` и `min-height: 100%`. Для центрирования используйте `transform: translate(-50%, -50%)`. Свойство `object-fit: cover` также важно для видео, чтобы оно покрывало область.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку