ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивное видео сайта с применением CSS

Адаптивное видео сайта с применением CSS

Есть несколько вариантов для реализации отзывчивого видео, но рассмотрим CSS, что по умолчанию под адаптивный каркас видео. Если вы читали об адаптивном дизайне, вы, конечно, слышали о медиа-запросах, и есть вероятность, что вы использовали их сами. Для тех, кто этого не сделал, а точнее не выставил запросы, то нужно задать конкретные правила CSS для разных устройств вывода, не меняя фактического контента. Это касается всех интернет ресурсов, где к описанию ставят плеер, не говоря про тематику просмотр фильмов в онлайн режиме.

Это не секрет, что поисковые системы предпочитают выводить в топ своего поиска адаптивный дизайн, и видео плеер не исключение. Но если брать одно видео в популярного сервис, то оно от системы уже само подстраивается под размеры блока, в котором находится. А вот некоторые нужно самостоятельно делать, но главное это не сложно, здесь задаем 100% значениям, как iframe или object, с чего код плеера начинается.

Где после этого оно станет растягиваться и на самых малых экранах выводит корректно. Многие из примеров, которые можно наблюдать в адаптивном блоке каркаса, заменяют видео статическим изображением в маленьких окнах просмотра. Это может быть связано с опасениями относительно использования данных в мобильных сетях. Но скажем, на данный момент мы хотели сделать видео полностью адаптивным.

Установка:

В CSS нужно поставить стили, а точнее оберните iframe или другой элемент видео в, div class="video"чтобы применить следующие правила CSS. После чего вы иможете проверить, где ваше видео полностью соотвествует адаптивности.

CSS

Код

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 2em; /*optional*/
}
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Процент высоты к ширине на основе соотношения сторон.

Демонстрация

Также для примера есть еще варианты:

Чтобы создать эффект, который изначально поддерживает соотношение сторон видео при изменении родительского контейнера, аналогично background-size: contain, высота и ширина должны быть установлены на 100% процентов.

CSS

Код

video {
height: 100%;
width: 100%;
}

Это необходимый минимум для адаптивного видео.

Также рассмотрим еще одно актуальное решение, где задействуем background-size: в стилистике. Которое будет равно сохранять соотношение сторон, если видео или контейнер имеют разные размеры, то видео будет обрезано слева и справа.

Код

video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

Демонстрация

Заключение:

Атрибут media является одним из актуальных решением, только в том случай, если видео изначально является большим. Однако, поскольку он может исчезнуть из спецификации HTML5, его использование может означать, что вам, возможно придется пересмотреть свои реализации в будущем.

23 Февраля 2019 Просмотров: 1196 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0