Learn how to add a video background banner to your Shopify homepage with ease. Our Shopify video banner section lets you create stunning visuals that enhance your store’s appeal. Whether you want to showcase a product or tell your brand’s story, our solution ensures a seamless Shopify video background experience; fully customizable, mobile-friendly, and designed to captivate your audience.
Please follow video guide
ℹ️ Looking for more than just the basics? The premium version of this simple section offers a lot more features and flexibility. 👉🏾 Check it out
Shopify video banner section – Liquid code
Liquid
{% comment %} Design and developed by @jak - https://youtube.com/@heyjak {% endcomment %}
{% style %}
.video--banner {
position: relative;
overflow: hidden;
height: calc(100vh - 2rem);
}
#shopify-section-{{ section.id }} .vdo--bacground--overlay {
position: absolute;
display:block;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 1;
opacity: 0.{{ section.settings.opacity }};
}
video {
width: 100%;
height: 100%;
object-fit: cover;
display: inline-block;
}
.vdo--content video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.vdo--text--content--wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
flex-flow: row;
padding: min(2rem, 3vw);
z-index: 1;
{% case section.settings.content_alignment %}
{% when 'top-left' %}
justify-content: flex-start;
align-items: flex-start;
{% when 'top-center' %}
justify-content: center;
align-items: flex-start;
{% when 'top-right' %}
justify-content: flex-end;
align-items: flex-start;
{% when 'center-left' %}
justify-content: flex-start;
align-items: center;
{% when 'center-center' %}
justify-content: center;
align-items: center;
{% when 'center-right' %}
justify-content: flex-end;
align-items: center;
{% when 'bottom-left' %}
justify-content: flex-start;
align-items: flex-end;
{% when 'bottom-center' %}
justify-content: center;
align-items: flex-end;
{% when 'bottom-right' %}
justify-content: flex-end;
align-items: flex-end;
{% endcase %}
}
.vdo--text--content{
display: inline-flex;
flex-direction: column;
gap: {{ section.settings.cotnent_gap_mbl }}px;
}
.vdo--text--content .video--title *,
.vdo--text--content .video--subtitle{
margin:0;padding:0;
}
@media screen and (min-width: 768px) {
.video--banner {
height: min({{ section.settings.vdo_height }}vh, calc(100vw - 4.5vw));
}
}
@media screen and (max-width: 767.98px){
.video--banner {
height: {{ section.settings.mbl_vdo_height }}vw;
}
}
{% endstyle %}
<section class="video--banner">
<div class="vdo--bacground--overlay"></div>
<div class="vdo--content">
{{
section.settings['self-hosted-video']
| video_tag: autoplay: true, loop: true, muted: true, image_size: '1400x'
}}
</div>
<div class="vdo--text--content--wrap">
<div class="vdo--text--content">
{% for block in section.blocks %}
{% case block.type %}
{% when 'heading' %}
<style>
{% if block.settings.enable_custom_font_title %}
.vdo--text--content .video--title *{
font-family: {{ block.settings.title_font.family }}, {{ block.settings.title_font.fallback_families }};
font-weight: {{ block.settings.title_font.weight }};
font-style: {{ block.settings.title_font.style }};
}
{% endif %}
.vdo--text--content .video--title *{
font-size: {{ block.settings.title_size_mbl }}px;
line-height: {{ block.settings.title_lh_mbl }}%;
color: {{ block.settings.title_color }};
}
@media screen and (min-width: 768px){
.vdo--text--content .video--title *{
font-size: {{ block.settings.title_size }}px;
line-height: {{ block.settings.title_lh }}%;
}
}
</style>
<div class="video--title">
{% if block.settings.vdo_heading != blank %}{{ block.settings.vdo_heading }}{% endif %}
</div>
{% when 'subheading' %}
<style>
.vdo--text--content .video--subtitle{
font-size: {{ block.settings.subtitle_size }}px;
color: {{ block.settings.subtitle_color }};
}
</style>
{% if block.settings.vdo_subheading != blank %}
<p class="video--subtitle">{{ block.settings.vdo_subheading }}</p>
{% endif %}
{% when 'button' %}
<style>
{% if block.settings.enable_custom_font_btn %}
.vdo--text--content .vdo--button{
font-family: {{ block.settings.btn_font.family }}, {{ block.settings.btn_font.fallback_families }};
font-weight: {{ block.settings.btn_font.weight }};
font-style: {{ block.settings.btn_font.style }};
}
{% endif %}
.vdo--text--content .vdo--button{
display: inline-block;
text-decoration: none;
outline: none;
cursor:pointer;
border: none;
white-space: nowrap;
font-size: {{ block.settings.btn_size_mbl }}px;
line-height: {{ block.settings.btn_lh_mbl }}%;
padding: .5rem 1.9rem .5rem;
background-color: transparent;
color: white;
box-shadow: inset 0 0 0 1px #fff;
position: relative;
overflow: hidden;
z-index:1;
transition: color 0.3s ease;
}
.vdo--text--content .vdo--button:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: -1;
}
.vdo--text--content .vdo--button:hover{color:black;}
.vdo--text--content .vdo--button:hover::before {
transform: translateY(0);
}
@media screen and (min-width: 768px){
.vdo--text--content .vdo--button{
font-size: {{ block.settings.btn_size }}px;
line-height: {{ block.settings.btn_lh }}%;
}
}
</style>
<div class="vdo-button-wrap">
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
<a class="vdo--button" href="{{ block.settings.button_link }}">{{ block.settings.button_label }}</a>
{% endif %}
</div>
{% endcase %}
{% endfor %}
</div>
</div>
</section>
{% schema %}
{
"name": "Video-background-banner",
"limit": 1,
"settings": [
{
"type": "video",
"id": "self-hosted-video",
"label": "Self hosted video"
},
{
"type": "range",
"id": "opacity",
"label": "Bacground overlay",
"min": 0,
"max": 9,
"default": 1,
"step": 1
},
{
"type": "range",
"id": "vdo_height",
"label": "Video height",
"min": 56,
"max": 156,
"default": 66,
"step": 2
},
{
"type": "header",
"content": "Content alignment"
},
{
"type": "select",
"options": [
{ "value": "top-left", "label": "Top Left" },
{ "value": "top-center", "label": "Top Center" },
{ "value": "top-right", "label": "Top Right" },
{ "value": "center-left", "label": "Center Left" },
{ "value": "center-center", "label": "Center Center" },
{ "value": "center-right", "label": "Center Right" },
{ "value": "bottom-left", "label": "Bottom Left" },
{ "value": "bottom-center", "label": "Bottom Center" },
{ "value": "bottom-right", "label": "Bottom Right" }
],
"id": "content_alignment",
"label": "Alignment",
"default": "bottom-right"
},
{
"type": "range",
"id": "cotnent_gap_mbl",
"label": "Gap between content",
"min": 5,
"max": 50,
"default": 10,
"step": 1,
"unit": "px"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "range",
"id": "mbl_vdo_height",
"label": "Video height",
"min": 36,
"max": 150,
"default": 46,
"step": 2
}
],
"blocks": [
{
"type": "heading",
"name": "Title",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "vdo_heading",
"label": "Heading",
"default": "<h1>Peptide Lip Shape has arrived.</h1>"
},
{
"type": "checkbox",
"id": "enable_custom_font_title",
"label": "Enable custom font"
},
{
"type": "font_picker",
"label": "Font family",
"default": "aleo_n7",
"id": "title_font",
"info": "Enable custom font and choose one from the list"
},
{
"type": "range",
"id": "title_size",
"label": "Title size",
"min": 0,
"max": 100,
"default": 42,
"step": 2,
"unit": "px"
},
{
"type": "range",
"id": "title_lh",
"label": "Title line height",
"min": 70,
"max": 200,
"default": 100,
"step": 10,
"unit": "%"
},
{
"type": "color",
"id": "title_color",
"label": "Title color",
"default": "#fcfcfc"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "range",
"id": "title_size_mbl",
"label": "Title size",
"min": 0,
"max": 150,
"default": 42,
"step": 2,
"unit": "px"
},
{
"type": "range",
"id": "title_lh_mbl",
"label": "Title line height",
"min": 70,
"max": 150,
"default": 100,
"step": 10,
"unit": "%"
}
]
},
{
"type": "subheading",
"name": "Subtitle",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "vdo_subheading",
"label": "Subheading"
},
{
"type": "range",
"id": "subtitle_size",
"label": "Subtitle size",
"min": 8,
"max": 100,
"default": 18,
"step": 2,
"unit": "px"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle color",
"default": "#fcfcfc"
}
]
},
{
"type": "button",
"name": "Button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "checkbox",
"id": "enable_custom_font_btn",
"label": "Enable custom font"
},
{
"type": "font_picker",
"label": "Font family",
"default": "aleo_n7",
"id": "btn_font",
"info": "Enable custom font and choose one from the list"
},
{
"type": "range",
"id": "btn_size",
"label": "Button size",
"min": 0,
"max": 40,
"default": 14,
"step": 2,
"unit": "px"
},
{
"type": "range",
"id": "btn_lh",
"label": "Button line height",
"min": 70,
"max": 200,
"default": 100,
"step": 10,
"unit": "%"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "range",
"id": "btn_size_mbl",
"label": "Button size",
"min": 0,
"max": 30,
"default": 14,
"step": 2,
"unit": "px"
},
{
"type": "range",
"id": "btn_lh_mbl",
"label": "Button line height",
"min": 70,
"max": 150,
"default": 100,
"step": 10,
"unit": "%"
}
]
}
],
"presets": [
{
"name": "video-background-banner"
}
],
"enabled_on": { "templates": ["index"] }
}
{% endschema %}
