Сохраняю на память всякий свой опыт. Вот пришла очередь для верстки, а именно — масштабирование всяких видосиков в соответствии с шириной блока, в котором они находятся.
Фрейм, обджект или эмбд должны быть расположены в диве с классом «видео»:
<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%;
}Помогло? Лайкуйте, комментируйте, делитесь!
На этом у меня всё. Печатал знаниями в блог Геннадьич. Благодарю за внимание!