Независимо от того, вставляете ли вы на сайт видео html5 тегом <video> или встраиваете с Yutube через <iframe>, оно должно хорошо адаптироваться под различные устройства.
Внимание! Весь код в разделе отредактирован на сервисе C D E P E N.
Чтобы получить визуальную информацию — нажмите в редакторе на вкладку Result.
Адаптивное 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="/images/article/adaptvideo/prevyu.jpg" preload="none">
<source src="/video/videotest.mp4" type="video/mp4">
</video>
Чтобы видео адаптировалось под ширину блок-контейнера с сохранением пропорций, зададим элементу <video> следующие свойства:
video {
width: 100%;
height: auto;
max-height: 100%;
margin: 0 auto;
padding: 0 0.75rem;
}
Редактировать на C D E P E N
See the Pen Адаптивное HTML5 видео by Nikolay Koval (@kovnik1943) on CodePen.
Адаптивное видео с 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>
Редактировать на C D E P E N
See the Pen Видео Vimeo by Nikolay Koval (@kovnik1943) on CodePen.
Видео YouTube
<div class="thumb-wrap">
<iframe src="https://www.youtube.com/embed/xSHRCbR2VS8?si=88ZIQdxiJ2cECSTh" title="YouTube video player" width="560" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
Редактировать на C D E P E N
See the Pen Видео YouTube by Nikolay Koval (@kovnik1943) on CodePen.
Адаптивный блок с видеороликом
Чтобы сделать адаптивный блок с видеороликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:
.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>
Редактировать на C D E P E N
See the Pen Адаптивный блок с видеороликом by Nikolay Koval (@kovnik1943) on CodePen.
