«
»
King ComposerWEBWordPressWordPress - CSSWordPress - jQueryПлагины

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

Так как я в основном делаю проекты на 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

Связанные записи
WordPressПлагины

Как принимать пожертвования? 4 лучших плагина для пожертвований на сайте WordPress.

WEB

Beaker Browser - Одноранговый браузер для веб-хакеров и разработчиков.

WordPressПлагиныПолезные сайты

Бесплатные и платные решения для клонирования (дублирования) WordPress сайта

WordPressПлагины

Как получить больше подписчиков электронной почты на вашем сайте WordPress