22.01.2018
Как добавить видео на фон блока.
Обновленный и упрощенный пример кода для создания блока с фоновым видео в новой статье Как создать блок с видео-фоном на сайте.
В моем примере используется максимально вычищенный, но рабочий код, так же в коде есть несколько элементов, которые нужны для дизайна данного блока, но вовсе не обязательны.
Для мобильных телефонов видео будет отключено, и на фон будет установлена статичная картинка.
Мой HTML будет выглядеть так:
<section class="about"> <video class="video" loop="loop" autoplay="" muted=""> <source src="https://denis-creative.com/wp-content/uploads/2018/01/video.mp4" type="video/mp4" /> <source src="https://denis-creative.com/wp-content/uploads/2018/01/video.ogv" type="video/ogv" /> <source src="https://denis-creative.com/wp-content/uploads/2018/01/video.webm" type="video/webm" /> </video> <div class="about-header"> <img src="https://denis-creative.com/wp-content/uploads/2018/01/about-header-bg-2.png" class="about-header-bg-2" alt=""> </div> <div class="about-title">CSS video background</div> <div class="about-footer"></div> </section>
CSS для блока с фоновым видео:
.about { padding: 300px 0; background-color: #0d2562; color: #fff; overflow: hidden; position: relative; } .about-title { font-family: sans-serif; font-size: 70px; text-align: center; position: relative; opacity: .5; } /* VIDEO */ .video { top: 50%; width: 1938px; transform: translate(-50%, -50%); opacity: 0.5; left: 50%; z-index: 0; position: absolute; } .about-header { position: absolute; top: 0; width: 100%; height: 110px; -webkit-background-size: cover; background-size: cover; background: url(https://denis-creative.com/wp-content/uploads/2018/01/about-header-bg.png) 0 top no-repeat; } .about-footer { position: absolute; bottom: 0; width: 100%; height: 126px; -webkit-background-size: cover; background-size: cover; background: url(https://denis-creative.com/wp-content/uploads/2018/01/about-footer-bg.png) 0 top no-repeat; } .about-header-bg-2 { position: absolute; left: 50%; top: 0; z-index: 1; transform: translate(-50%, -100%); transition: transform 0.9s 0.2s ease; will-change: transform; transform: translate(-50%, 0); } @media (max-width: 768px) { .about { background: url(https://denis-creative.com/wp-content/uploads/2018/01/about-bg.jpg) 0 top no-repeat #0e438b; -webkit-background-size: cover; background-size: cover; } .video, .about-header, .about-footer, .about-header-bg-2 { display: none; } } @media (max-width: 480px) { .about-title{ font-size: 40px; } }
Рабочий пример блока с видео-фоном:
See the Pen CSS video background by Denis (@deniscreative) on CodePen.0
Комментарии (2) к “Делаем видео-фон для блока с помощью CSS”
Дмитрий
в сафари не хочет работать
Искандер
в яндексе на видео накладывается не прозрачный фон по дефолту, или я просто не нашел где это убрать