Независимо от того, вставляете ли вы на сайт видео html5 тегом <video> или встраиваете с Yutube через <iframe>, оно должно хорошо адаптироваться под различные устройства.

 

 

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

Когда элемент <video> впервые стал появляться на страницах сайтов, для воспроизведения видео файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4...

 

Для вставки видео на сайт, нужно в HTML разметке прописать тег <video>, внутри которого через src подключить видеоролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью картинку к видеоролику. Впрочем, можно обойтись и без картинки,- в таком случае, браузер покажет в плеере первый кадр видео.

 

 

В материале используется быстрый и удобный web-метод копирования кода:
В блоке <pre>, где отображается HTML-, или CSS-код — встроена кнопка для копирования этого кода. При нажатии,— код выделяется и автоматически копируется в буфер обмена.

 


    
        <video controls poster="/video/absambl-veseluha.jpg" preload="none">
		<source src="/video/veseluha-travy.mp4" type="video/mp4">
        </video>
    

 

Чтобы видео адаптировалось под ширину блок-контейнера с сохранением пропорций, зададим элементу <video> следующие свойства:

 


    
video {
    width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    padding: 0 0.75rem;
}
    

 

Адаптивное видео с YouTube или Vimeo

Видео с YouTube или Vimeo добавляется на страницу с помощью элемента <iframe>. Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap. Получить код фрейма Vimeo можно по кнопке Share ,- далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».

 

Видео Vimeo

 


    
<div class="thumb-wrap">
    <iframe src="https://player.vimeo.com/video/159120552?byline=0&portrait=0&badge=0" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</div>
    

 

Видео YouTube

 

 


    
<div class="thumb-wrap">
    <iframe src="https://www.youtube.com/embed/5TG4PZUMoYY?list=PL_S1JYD2dUpWL1dtgaUJXW5ihhNw-DVVW" title="Band ODESSA - А мы танцуем!" width="560" height="315" frameborder="0" allowfullscreen>
    </iframe>
</div>
    

 

Адаптивный блок с видеороликом

Чтобы сделать адаптивный блок с видеороликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:

 


    
.thumb-wrap {
    position: relative;
    padding-bottom: 56.25%; /* задаёт высоту контейнера
для 16:9 (если 4:3 — поставьте 75%) */
height: 0; overflow: hidden; } .thumb-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 0; outline-width: 0; }

 

 


    
<div class="thumb-wrap">
    <iframe allowfullscreen src="https://kinovibe.co/embed/27477" scrolling="no" frameborder="0" height="315" width="560" marginwidth="0" marginheight="0">
    </iframe>
</div>
    

 

Источник: html5book.ru

 

 

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