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

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

1 744

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

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

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

Код:

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

[aesop_image force_fullwidth=”off” lightbox=”off” captionposition=”left” captionsrc=”custom” align=”center” imgwidth=”800px” img=”https://techblog.sdstudio.top/wp-content/uploads/2020/06/null-34.jpg” panorama=”off”]

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

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

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

http://jsfiddle.net/kNMnr/

Html

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

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