Как сделать видео на сайте адаптивным
Независимо от того, вставляете ли вы на сайт видео html5 тегом video или встраиваете с ютуба через iframe, оно должно хорошо адаптироваться под различные устройства.
Вставить и адаптировать HTML5 видео
Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.
<div class="movie-wrap">
<video class="movie" src="video/travaho.mp4" width="640" height="480" controls poster="video/travaho.jpg">
Ваш браузер не поддерживает HTML5 видео.
</video>
</div>
Если оставить у видео фиксированные размеры, то на экране с разрешением меньше, чем 640 пикселей по ширине, появится горизонтальная полоса прокрутки и может поломаться верстка.
Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.
.movie {
width: 100%;
height: auto;
margin: 0 auto; // выравнивает по центру по вертикали
display: block;
max-width: 500px;
}
Теперь, благодаря нескольким строчкам CSS кода, видео стало адаптивным и пропорционально подстраивается под любую ширину экрана без горизонтальной полосы прокрутки.
Адаптивное видео с Ютуба
Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.
<div class="movie-container">сюда вставить код iframe</div>
Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим классу movie-container следующие свойства:
.movie-container {
position: relative;
padding-bottom: 56.25%; // сохраняет пропорции
height: 0;
overflow: hidden;
display: block;
}
Мы расположили iframe относительно контейнера и приняли меры предосторожности на случай переполнения контейнера.
Сейчас видео с ютуба стало адаптивным, но оно растягивается на всю ширину браузера. Нужно ограничить размеры видео на странице.
Создадим ещё один блок-обертку, который ограничит размеры и отцентрирует видео.
.movie-fixed {
max-width: 500px;
margin: auto;
}
HTML разметка целиком.
<div class="movie-fixed">
<div class="movie-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer;
<autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Адаптивное видео на Bootstrap
У Bootstrap уже есть готовые классы, чтобы видео было адаптивным. Один класс присваивается самому объекту:
<video>
<iframe>
<object>
<embed>
Два других класса – блоку-обертке.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="URL" allowfullscreen></iframe>
</div>
-
Создано 25.09.2019 10:28:07
-
Михаил Русаков
Комментарии (1):
Здравствуйте, у меня самонаполняемый видео с ютуб сайт - https://youtube-interesnosti.ru на phpMelody проблема с отображением сайта на мобильных устройствах. Какие мне коды закинуть, чтобы решить эту проблему? Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.