При создании адаптивного сайта, нужно чтобы было адаптивным и все видео на сайте. Сейчас мы покажем как сделать адаптивным видео из 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">

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

</div>

2) В стилевой файл прописать такой код:

.myvideo {

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

border:1px solid #ccc;

}

.myvideo iframe,.myvideo object,.myvideo embed {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

После этого наше видео станет адаптивным: