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% доступной ширины, а высота будет рассчитана пропорционально исходя из заданного соотношения сторон.
ОГРОМАДНЕЙШЕЕ СПАСИБО !!!
Спасибо, добрый человек!