Как масштабировать видео по ширине блока

Сохраняю на память всякий свой опыт. Вот пришла очередь для верстки, а именно — масштабирование всяких видосиков в соответствии с шириной блока, в котором они находятся.

Фрейм, обджект или эмбд должны быть расположены в диве с классом «видео»:

<div class="video">
	<iframe src="https://www.youtube.com/embed/S0TMq4pffdk"frameborder="0"></iframe>
</div>

Суть проста. Див выступает в роли контейнера с position:relative, нулевой высотой и overflow:hidden, а видео внутри растягивается по нему абсолютным позиционированием на 100% по обеим осям из левой верхней точки дива. Мы же знаем, что само по себе видео не растянется?

Внимание! Важно, для заполнения пустого контейнера добавить отступ снизу 56,25%!

Вот и все стили:

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Помогло? Лайкуйте, комментируйте, делитесь!

На этом у меня всё. Печатал знаниями в блог Геннадьич. Благодарю за внимание!