.css() add_action add_filter background cf7 contact form 7 cookies cqp css custom code cyr2lat footer functions.php gradient html javascript jquery js js-cookie left px mic obs php position slick styles.css transition vbr visibility wp антиспам аудит сайта верстка запись игр зачем это нужно кириллица латиница настройки записи обновление плагины wp пояснение проверка типа страницы свой код транслит удобство
Геннадьич написал статью 16 мая, 2021 года (8)
Как масштабировать видео по ширине блока
Сохраняю на память всякий свой опыт. Вот пришла очередь для верстки, а именно — масштабирование всяких видосиков в соответствии с шириной блока, в котором они находятся.
Фрейм, обджект или эмбд должны быть расположены в диве с классом «видео»:
<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%;
}
Помогло? Лайкуйте, комментируйте, делитесь!
На этом у меня всё. Печатал знаниями в блог Геннадьич. Благодарю за внимание!
Предыдущий пост: Contact Form 7 и reachGoal — настройка многих целей Яндекс Метрики
Следующий пост: Что такое аудит сайта и нужен ли он вам?