Адаптивное видео на страницах

При работе с адаптацией сайта под разные разрешения часто сталкиваюсь с проблемой адаптации видео.

Иногда, если не обращать внимание на масштабирование видео на разных разрешениях при заданных фикс. размерах фрейма, можно получить вот такой результат (см. рисунок):

Залезание видео на контент

Решается эта проблема очень просто: в Bootstrap есть встроенный класс для того, чтобы адаптивить видео под необходимое соотношение сторон (16:9) или (4:3):

embed-responsive embed-responsive-16by9 и
embed-responsive embed-responsive-4by3 соответственно.

Эти классы адаптивят теги <iframe>, <embed>, <video> и <object>, а также любые другие, если добавить в них класс embed-responsive-item.

Замечание: можно не включать в iframe frameborder="0″, так как эта строка перезапишется бутстраповским классом.

<div class="embed-responsive embed-responsive-16by9">
	<iframe width="560" height="325" src="https://www.youtube.com/embed/P2sY7jDoReg" class="embed-responsive-item"></iframe>
</div>

И вот результат на разрешении md:

Результат

Использование на 100% выбранного инструмента помогает эффективнее решать простые задачи!

#учибутстрап

Оставить комментарий

Комментарии (3)

  1. Игорь 17.01.2016 Ответить
    Единственное место, где нашёл толковое объяснение как можно решить проблему с адаптивным видео. Благодарю за информацию!
  2. Артур 23.10.2016 Ответить
    Четкое решение, спасибо автору!
  3. Александр 07.07.2020 Ответить
    Спасибо за толковое и простое решение, без редактирования стилей и тд.
    огромный вам + к карме )))