Адаптивное видео на страницах
При работе с адаптацией сайта под разные разрешения часто сталкиваюсь с проблемой адаптации видео.
Иногда, если не обращать внимание на масштабирование видео на разных разрешениях при заданных фикс. размерах фрейма, можно получить вот такой результат (см. рисунок):
Решается эта проблема очень просто: в 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)