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% доступной ширины, а высота будет рассчитана пропорционально исходя из заданного соотношения сторон.

| Twitter Bootstrap, Вёрстка и CSS | Опубликовано: 02.11.2014 13:47 | 0