Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Размеры видео для адаптивного дизайна на CSS3

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

видео html5, видео на сайт, размеры видео, адаптивный дизайн

Код будет работать для любого видео, которое устанавливается в IFrame. Давайте посмотрим простой HTML-код, который обеспечивает YouTube для обмена своими видео на других сайтах:

<iframe width=»640″ height=»480″ src=»http://www.youtube.com/embed/WZqTxWIHFQQ» frameborder=»0″ allowfullscreen></iframe>

Откройте ДЕМО>>> страницу и просто попробуйте изменить размер окна браузера, чтобы убедиться, что размер видео не изменяется относительно ширины окна браузера: Как видите наше видео имеет фиксированный размер.

Для того, чтобы сделать видео соответствующим его ширине контейнера, его код ( IFrame тег в нашем случае) нужно разместить внутри div тега с классом «video-responsive» и  соответственно добавить нужные стили.

HTML-код:

<div class=»video-responsive»>
<iframe width=»640″ height=»480″ src=»http://www.youtube.com/embed/WZqTxWIHFQQ» frameborder=»0″ allowfullscreen></iframe>
</div>

Код CSS:

.video-responsive {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed,
.video-responsive video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Теперь видео YouTube, которое вы видели выше, регулируется по ширине контейнера при изменении размера окна браузера: ДЕМО>>>

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

Каждое видео имеет свой ​​собственный формат изображения. Стандартное соотношение сторон для видео 4: 3, но в настоящее время много видео создаются в широкоэкранном формате с соотношением сторон 16: 9. Этот факт должен быть принят во внимание, когда вы собираетесь использовать это решение. Стили выше разработанны для видео с соотношением сторон 4: 3. Если вы хотите использовать их для видео с соотношением сторон 16: 9, вам нужно будет заменить значение padding-bottom CSS на следующее значение: padding-bottom: 56.25%;.

На самом деле здесь есть формула для расчета величины padding-bottom свойства для видео с любым возможным соотношением сторон:

height / width * 100

Расчеты для современных примеров:

9 / 16 * 100 = 56.25

3 / 4 * 100 = 75

Теперь вам ясно , как мы получили padding-bottom: 56.25%; для соотношения сторон 16:9 и padding-bottom: 75%; для соотношения сторон 4:3.

В настоящее время данное решение работает таким образом для HTML5 видео и для YouTube видео.

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

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

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

Добавить комментарий

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ