Вставляем в страницу responsive видео на Bootstrap
Twitter Bootstrap - отличный набор интсрументов, позволяющий с помощью набора стилей создавать сайты, автоматически подстраивающиеся под любой размер экрана. Ниже приведен способ, позволяющий пропорционально изменять размер видео, встраиваемого в страницу. Это особенно актуально для продающих (посадочных) страниц, которые должны хорошо выглядеть на всех устройствах от мобильного телефона до широкоформатного монитора компьютера.
В приведенном способе предусмотрено два типа видео согласно соотношению сторон: 16 к 9 и 4 к 3. Для применения этого способа видео необходимо поместить в контейнер с соответствующим классом.
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> |
<div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> |
В файл стилей поместим следующий код:
.embed-responsive.embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive.embed-responsive-4by3 { padding-bottom: 75%; } .embed-responsive{ position: relative; display: block; height: 0; padding: 0; overflow: hidden; width:100%; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } |
В результате любое видео, встроенное с помощью тегов embed, object или iframe, будет занимать 100% доступной ширины, а высота будет рассчитана пропорционально исходя из заданного соотношения сторон.
Спасибо, добрый человек!