Profile Picture
Julian Galluzzo

Background Video Section From CDN

A simple section which uses a background video that's pulled from a CDN. Requires the ability to add the 'source' HTML tag.
Copy component
{"content":[{"id":"grqqer","name":"section","parent":0,"children":["ecigdi","agedjz","rrsjwu"],"settings":{"_position":"relative","_overflow":"hidden","_typography":{"font-family":"Manrope"}},"label":"Video Section"},{"id":"ecigdi","name":"block","parent":"grqqer","children":["whvfxm"],"settings":{"_position":"relative","_width":"100%","_height":"100%","_zIndex":"10","_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_padding":{"bottom":"100","top":"100","left":"5%","right":"5%"}},"label":"Content"},{"id":"whvfxm","name":"container","parent":"ecigdi","children":["raoefn","qmnnks"],"settings":{}},{"id":"raoefn","name":"heading","parent":"whvfxm","children":[],"settings":{"text":"Lava is pretty cool.","tag":"h1"}},{"id":"qmnnks","name":"text-basic","parent":"whvfxm","children":[],"settings":{"text":"And so is loading a background video from a CDN :)","_margin":{"top":"10"}}},{"id":"agedjz","name":"block","parent":"grqqer","children":[],"settings":{"_position":"absolute","_zIndex":"2","_width":"100%","_height":"100%","_background":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.67)","hsl":"hsla(0, 0%, 0%, 0.67)"}}},"label":"Overlay"},{"id":"rrsjwu","name":"div","parent":"grqqer","children":["mmqjqb"],"settings":{"tag":"custom","customTag":"video","_attributes":[{"id":"xpfjoi","name":"autoplay"},{"id":"nldzfq","name":"loop"},{"id":"mxwsyr","name":"muted"},{"id":"lsppqs","name":"playsinline"}],"_width":"100%","_position":"absolute","_zIndex":"0"},"label":"Video"},{"id":"mmqjqb","name":"div","parent":"rrsjwu","children":[],"settings":{"_attributes":[{"id":"wzrmcl","name":"src","value":"https://videos.pexels.com/video-files/30401545/13028933_1920_1080_60fps.mp4"},{"id":"wsvslu","name":"type","value":"video/mp4"}],"tag":"custom","customTag":"source","_width":"100%"},"label":"Source"}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[],"globalElements":[]}

Our notes on this component

Using this structure allows you to use a background video from ANY source, not just from YouTube and Vimeo.

In order to use this, you must be able to add the ‘source’ HTML tag to elements, which you cannot do by default with Bricks.

We’ve created a free plugin that allows you to add any HTML tag in Bricks Builder – click here to download it!

Similar components

There are no other components in this category yet! To view all components, go to our home page.