Скрипты » Видео


Адаптивное видео

Существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, VK, RuTube, Mail Video и других.

Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe, object и embed, следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.

.Myvideo { 
 position: relative; 
 padding-bottom: 56.25%; 
 height: 0; 
 overflow:hidden; 
} 
.Myvideo iframe, 
.Myvideo object, 
.Myvideo embed {
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%;
 height: 100%; 
}

Как видите всё очень просто, задаём относительное позиционирование для родительского блока и абсолютное относительно родителя, для встроенных элементов, определив им при этом, процентные значения ширины width: 100%; и высоты height: 100%;, чтобы в итоге видеоплеер смог растягиваться или сжиматься в соответствии размеров основного контейнера.

Со стилями разобрались, остаётся создать div контейнер с предопределенным классом, в нашем случае это class="Myvideo", затем вставить внутрь этого контейнера код нужного вам видеоролика, и всю эту конструкцию прописать там где вы планируете показовать видео.

<div class="Myvideo">
 <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe>
</div>

Для некоторых видео параметры ширины и высоты iframe обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width="auto" и height="auto" в фрейм.

 
Видео 1076 02.02.2025
CSS, Скрипт, Видео, Адаптивное, Vk, youtube, RuTube, Mail Video

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