TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Video Background – полностью адаптивный видео бекграунд (работающий из вложенного div)

1 245

Так как я в основном делаю проекты на King Composer’e для меня важен видео бэкграунд, но к сожалению на данный момент плагин поддерживает в качестве источника видео только сервис YouTube, что весьма грустно.

Для того чтобы добавить свой источник (в том числе и локальную медиатеку) пришлось немного поизвращаться. В итоге получился практически универсальный вариант, который придет на помошь при создании сайтов как при помощи всякого рода строителей, так и при помощи написания сайтов на чистом коде.

Данный код можно вставлять в родительский блок, и он будет делать свою работу (отображать видео в бекграунде), конечно у каждого проекта свои стили но думаю мой код для начала работы будет вполне хорошим фундаментом.

Код:

<style> video#video{ min-height: 100vh; min-width: 100vw; top: 0; left: 0; overflow: hidden; position: absolute; z-index: 0; margin-top: -410px; } @media screen and (max-width:768px;){ video#video{ margin-left: -50%; min-width: 150%; } } @media screen and (max-width:450px){ video#video{ margin-left: -100%; min-width: 200%; } } </style> <div class="video-background"> <div class="video-foreground"> <div class="section active" id="section0"> <video id="video" autoplay loop muted poster="СКРИН_ПЕРВОГО_КАДРА_ВИДЕО.jpg"> <source src="http://ВАШ_САЙТ/ВИДЕО.mp4" type="video/mp4" /> </video> </div> </div>

Пример куда вставлять при использовании в KingComposer:

null-34

Отдельное спасибо данной статье:

https://iandevlin.com/blog/2013/03/html5/html5-video-and-background-images/

Так же стоит взять на заметку данное решение:

http://jsfiddle.net/kNMnr/

Html

<div id="video_overlays"></div>

CSS

#video_overlays { position:absolute; float:left; width:100%; min-height:100%; background-color:rgba(30, 115, 190, 0.65); z-index:0; }

Все элементы должны быть relative

Источник записи: https://mediadoma.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее