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

При создании адаптивного сайта нужно чтобы было адаптивным и все видео на сайте. В этом уроке мы покажем как сделать адаптивным видео из Youtube, Vimeo, …

Видео из YouTube

Видео из YouTube вставляется на сайт с вставкой кода с применением тэга iframe либо с помощью тэга embed (старый код).

Например, этот код позволяет вставить на сайт видео клип Адриано Челентано:

<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>

Указанный способ позволяет вставить видео, которое пока еще не адаптивно. То есть при изменении размеров браузера, видео не будет уменьшатся.

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

Для того чтобы сделать видео из YouTube адаптивным, нужно сделать следующее:
1) Вставить тэг iframe с видео в <div class="myvideo">...</div>, то есть сделать так:
<div class="myvideo">
<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>
</div>
2) В стилевой файл прописать такой код:
.myvideo {
position:relative;
padding: 0 0 56.25% 0;
height:0;
overflow:hidden;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
После этого наше видео станет адаптивным:

Отметим что данная технология будет работать и для вставки видео с помощью тэга embed (просто вставляете код видео в <div class="myvideo">...</div>):

Отметим что при написании отступов мы писали все в одну строку, такой синтаксис является более семантичным, более правильным чем padding-bottom, так пишут только дилетанты, профессионалы всегда пишут в одну строку. Имейте это в виду если хотите хорошо писать код.

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

Данная технология позволяет сделать адаптивным видео и из Vimeo, для этого просто вставляете код с видео в <div class="myvideo">...</div> а затем прописываете вышеуказанные стили в стилевой файл (файл CSS).

Адаптивные карты Google и Яндекса

При вставке видео из YouTube использовался тэг iframe, этот тэг используется и в картах Google и Яндекса. Поэтому технология превращения обычного видео в адаптивное, будет действовать и для карт Google и Яндекса (точно также вставите код с картой в <div class="myvideo">...</div>):