Когда браузеры отображают 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;
}
