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

Written by
  • 2 года ago

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

Видео из YouTube

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

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

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

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

Для того чтобы сделать видео из YouTube адаптивным, нужно сделать следующее:
1) Вставить тэг iframe с видео в

, то есть сделать так:

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

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

Отметим что данная технология будет работать и для вставки видео с помощью тэга embed (просто вставляете код видео в

):

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

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

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

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

 

Leave a Comment

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

Menu Title