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



При создании адаптивного сайта, нужно чтобы было адаптивным и все видео на сайте. Сейчас мы покажем как сделать адаптивным видео из 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%;
}
После этого наше видео станет адаптивным:
Отметим что данная технология будет работать и для вставки видео с помощью тэга embed (просто вставляете код видео в
...
):

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

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

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

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

Comments

    No results found.