.css() add_action add_filter background cf7 contact form 7 cqp css database db footer functions.php gradient header html javascript jquery js left px mic obs php position slick styles.css transition trovo twitch vbr visibility vkplay wp_ автоматизация антиспам верстка выключение компа запись игр кейсы командная строка настройки записи обновление плагины wp спящий режим таймер удобство
Геннадьич написал статью 16 мая, 2021 года (701)
Как масштабировать видео по ширине блока
Сохраняю на память всякий свой опыт. Вот пришла очередь для верстки, а именно — масштабирование всяких видосиков в соответствии с шириной блока, в котором они находятся.
Фрейм, обджект или эмбд должны быть расположены в диве с классом «видео»:
<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 — настройка многих целей Яндекс Метрики
Следующий пост: Что такое аудит сайта и нужен ли он вам?