• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Поддержание пропорций для видео на CSS (Предельные значения для пропорций видео плеера на сайте)
Поддержание пропорций для видео на CSS
Kosten
Дата: Среда, 2019-10-02, 18:24 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25268
Награды: 58


Когда браузеры отображают img, то они сохраняют пропорции изображения. Если ширина указана, то высота будет автоматически установлена с сохранением соотношения сторон изображения. Но вот когда указана высота, ширина устанавливается автоматически.

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

Когда вы знаете размер экрана, вы можете установить высоту и ширину для видео. Но проблема возникает в поддержании отзывчивости. Безусловно, вы можете использовать запросы @media, чтобы установить высоту и ширину для разных размеров экрана, но это в основном проблема с вычислениями и без гарантий для всех размеров экрана.

В этом руководстве описывается такое решение, основанное исключительно на CSS.

Свойство CSS Padding в процентах:

При установке отступа в качестве длины 20px, 1.5em и так далее. Он фиксируется на заданном значении.

Но при установке отступа в процентах он рассчитывается по ширине родительского элемента.

Например, рассмотрим разметку ниже и их CSS:

HTML

Код
<div id="parent">
    <div id="child"></div>
</div>

CSS

Код
#child {
    padding-top: 50%;
}

В приведенном выше случае верхний отступ #child будет настроен на 200px и 50% от 400px.

Все свойства заполнения padding-top, padding-bottom, padding-left и padding-right следуют этому - они используют ширину родительского элемента.

Создание коробки с соотношением сторон:

Используя это, мы создаем родительский контейнер с соотношением сторон, где устанавливая padding-top: 56.25% и height: 0px. Дочерний контейнер, который является video, принимает полную высоту и ширину родительского контейнера .

Обратите внимание, что, хотя parent имеет высоту: 0px, он все же занимает высоту из-за заполнения.

HTML

Код
<div class="video-container">
  <video class="video"></video>
</div>

CSS

Код
.video-container {
    /* width is set as 100% here. any width can be specified as per requirement */
    width: 100%;
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Создание коробки с соотношением сторон:

Соотношение сторон 4: 3 означает, что высота в 3/4 раза больше ширины, что составляет 0,75 или 75%. В этом случае должен быть указан padding-top: 75% где padding-bottom также может быть использован.



Youtube видео

HTML

Код
<div class="youtube-video-container">
    <iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>

CSS

Код
.youtube-video-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.youtube-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}




Vimeo Video

HTML

Код
<div class="vimeo-video-container">
    <iframe class="vimeo-video" src="https://player.vimeo.com/video/285086929"></iframe>
</div>
CSS

.vimeo-video-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.vimeo-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
Прикрепления: 3774202.jpg(32.3 Kb) · 1455813.jpg(44.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Поддержание пропорций для видео на CSS (Предельные значения для пропорций видео плеера на сайте)
  • Страница 1 из 1
  • 1
Поиск: