Резиновое видео для сайта на чистом CSS

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

Действительно. Ведь когда каждый блок сам автоматически заполняет собой все свободное пространство, при этом, не искажая содержимое — это просто здорово! В случае с видео контентом, так же есть вариант подобного отображения. Причем без вкраплений js. Все, что необходимо — это iframe, object и embed.

Чтобы все получилось, создайте в таблице стилей CSS отдельный класс для родительского блока видео и впишите туда необходимые свойства. Учитывайте тот факт, что различные видео сервисы выдают разный код для вставки видео. Желательно заранее прописать стили для всех вариантов.

Вот как может выглядеть Ваш код:

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

Все проще, чем казалось бы. Нужно лишь задать относительное позиционирование для контейнера и абсолютное — для видео внутри. При этом не следует забывать об указании параметров ширины и высоты:

width:100%, height:100%

Это позволит видеоплееру растягиваться на весь контейнер.

Все, что осталось сделать — это создать в нужном месте div с прописанным классом:

class="video-responsive"

и вставить во внутрь код видео. Получится следующий код:

<div class=»video-responsive»>
<iframe width=»auto» height=»auto» src=»ссылка на видео» frameborder=»0″ allowfullscreen></iframe>
</div>

Это и весь фокус.

Оставить Комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *