How To TutorialShopifyWebsite Development Tips

How To Add Video Background Banner Section To Shopify Homepage (With Autoplay) by Custom Coding

By computertips Last updated Sep 2, 2024

Log in to your Shopify backend & go to “Online Store” and click “Customize” on your chosen theme.
In the backend, click on the three dots and select “Edit Code.”
Create a new section named – background-video.liquid
Paste the bellow code, and save the section

{%- if section.blocks.size > 0 -%}
 
{%- for block in section.blocks -%}
 
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if block.type == 'video' %}
 
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">
 
{%- if block.settings.video_link != blank -%}
 
<div class="fullscreen-video-wrap">
 
<video class="video-js" loop autoplay preload="none" muted playsinline
 
poster="https:{{ block.settings.video_image | img_url: 'master' }}">
 
<source src="{{ block.settings.video_link }}" type="video/mp4">
 
</video>
 
</div>
 
{% endif %}

<div class="videoBoxInfo">
 
{% if block.settings.title != blank %}
 
<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.title | escape }}
 
</h1>
 
{% endif %}
  
{%- style -%}
 
.videoBackground .imageBoxInfoDescription p {
 
color: {{ block.settings.color_text }}!important;
 
}
 
{%- endstyle -%}
 
{% if block.settings.text != blank %}
 
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.text }}
 
</div>
 
{% endif %}
 
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
 
<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
 
{{ block.settings.button_label | escape }}
 
</a>
 
{% endif %}
 
</div>
 
</div>
 
{% else %}
 
<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
 
<div class="imageBoxInfo">
 
{% if block.settings.title != blank %}
 
<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.title | escape }}
 
</h1>
 
{% endif %}
 
{%- style -%}
 
.videoBackground .imageBoxInfoDescription p {
 
color: {{ block.settings.color_text }}!important;
 
}
 
{%- endstyle -%}
 
{% if block.settings.text != blank %}
 
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.text }}
 
</div>
 
{% endif %}
 
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
 
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
 
{{ block.settings.button_label | escape }}
 
</a>
 
{% endif %}
 
</div>
 
</div>
 
{% endif %}
 
{%- endfor -%}
 
{% else %}
 
<div class="placeholderNoblocks">
 
This section doesn’t currently include any content. Add content to this section using the sidebar.
 
    </div>
 
{%- endif -%}
  
<style>
 
.main-content .videoBackground {
 
margin-top: -55px;
 
}
 
.videoBackground {
 
position: relative;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
position: absolute;
 
top: 0;
 
left: 0;
 
min-width: 100%;
 
width: 100%;
 
height: 100%;
 
overflow: hidden;
 
}
 
.videoBackground .fullscreen-video-wrap .video-js {
 
position: absolute;
 
top: 0;
 
left: 0;
 
min-height: 100%;
 
min-width: 100%;
 
width: 100%;
 
height: 100%;
 
object-fit: cover;
 
}
 
.videoBackground .fullscreen-video-wrap video {
 
min-height: 100%;
 
min-width: 100%;
 
object-fit: cover;
 
}
 
.videoBackground .videoBox {
 
display: flex;
 
align-items: center;
 
justify-content: flex-end;
 
flex-direction: column;
 
padding: 100px 20px 80px;
 
background-size: cover;
 
background-position: center;
 
background-repeat: no-repeat;
 
min-height: 500px;
 
max-height: 800px;
 
        height: calc(100vh - 165px);
 
position: relative;
 
}
 
.videoBackground .imageBox {
 
display: flex;
 
align-items: center;
 
justify-content: flex-end;
 
flex-direction: column;
 
padding: 100px 20px 80px;
 
background-size: cover;
 
background-position: center;
 
background-repeat: no-repeat;
 
position: relative;
 
min-height: calc(100vh - 165px);
 
height: auto;
 
}
 
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
 
z-index: 2;
  
margin: auto;
 
text-align: center;
 
}
 
.videoBackground .overlay {
 
content: "";
 
position: absolute;
 
top: 0;
 
right: 0;
 
bottom: 0;
 
left: 0;
 
background: #000;
 
z-index: 1;
 
}
 
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
 
-moz-user-select: none;
 
-ms-user-select: none;
 
-webkit-user-select: none;
 
user-select: none;
 
-webkit-appearance: none;
 
-moz-appearance: none;
 
appearance: none;
 
display: inline-block;
 
width: auto;
 
text-decoration: none;
 
text-align: center;
 
vertical-align: middle;
 
cursor: pointer;
 
border: 1px solid transparent;
 
border-radius: 2px;
 
padding: 10px 30px;
 
font-style: normal;
 
font-weight: normal;
 
letter-spacing: 0.06em;
 
white-space: normal;
 
font-size: 16px;
 
margin-top: 20px;
 
}
 
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
 
color: #FFF;
  
font-size: 65px;
 
line-height: 40px;
 
}
 
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
  
font-size: 17px;
 
line-height: 28px;
 
}
 
.videoBackground .placeholderNoblocks {
 
text-align: center;
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
    @media screen and (max-width: 767px) {
 
.main-content .videoBackground {
 
margin-top: -35px;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
z-index: 3;
 
}
 
.videoBackground .videoBox {
 
min-height: 300px;
 
height: 100%;
 
position: relative;
 
padding: 0;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
position: relative;
 
min-height: 300px;
 
z-index: -2;
 
}
 
.videoBackground .videoBoxInfo {
 
padding: 2px 20px;
 
width: 100%;
 
}
 
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
display: none;
 
}
 
    }
 
</style>
 
 
 
{% schema %}
 
{
 
"name": {
 
"en": "Video Background"
 
},
 
"class": "videoBackground",
 
"max_blocks": 1,
 
"blocks": [
 
{
 
"type": "video",
 
"name": "Video",
 
"settings": [
 
{
 
"type": "url",
 
"id": "video_link",
 
"label": {
 
"en": "Video link"
 
}
 
},
 
{
 
"type": "image_picker",
 
"id": "video_image",
 
"label": {
 
"en": "Cover image"
 
}
 
},
 
{
 
 
"type": "header",
 
"content": {
 
"en": "Text"
 
}
 
},
 
{
 
"type": "text",
 
"id": "title",
 
"label": {
 
"en": "Heading"
 
},
 
"default": "Video slide"
 
},
 
{
 
"type": "richtext",
 
"id": "text",
 
"label": {
 
"en": "Description"
 
},
 
"default": {
 
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
 
}
 
},
 
{
 
"type": "color",
 
"id": "color_text",
 
"label": {
 
"en": "Text color"
 
},
 
"default": "#ffffff"
 
},
 
{
 
"type": "text",
 
"id": "button_label",
 
"label": {
 
"en": "Button label"
 
}
 
},
 
{
 
"type": "url",
 
"id": "button_link",
 
"label": {
 
"en": "Button link"
 
}
 
},
 
{
 
"type": "color",
 
"id": "color_btn_bg",
 
"label": {
 
"en": "Background button color"
 
},
 
"default": "#ffffff"
 
},
 
{
 
"type": "color",
 
"id": "color_btn_text",
 
"label": {
 
"en": "Button text color"
 
},
 
"default": "#ffffff"
 
}
 
]
 
},
 
{
 
"type": "image",
 
"name": "Image",
 
"settings": [
 
{
 
"type": "color",
 
"id": "color_bg",
 
"label": {
 
"en": "Background color (optional)"
 
},
 
"default": "#16165b"
 
},
 
{
 
"type": "image_picker",
 
"id": "image_bg",
 
"label": {
 
"en": "or use an image (required)"
 
}
 
},
 
{
 
"type": "range",
 
"id": "overlay_opacity",
 
"label": {
 
"en": "Overlay opacity"
 
},
 
"min": 0,
 
"max": 99,
 
"step": 1,
 
"unit": {
 
"en": "%"
 
},
 
"default": 0
 
},
 
{
 
"type": "header",
 
"content": {
 
"en": "Text"
 
}
 
},
 
{
 
"type": "text",
 
"id": "title",
 
"default": "Image slide",
 
"label": {
 
"en": "Heading"
 
}
 
},
 
{
 
"type": "richtext",
 
"id": "text",
 
"label": {
 
"en": "Description"
 
},
 
"default": {
 
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
 
}
 
},
 
{
 
"type": "color",
 
"id": "color_text",
 
"label": {
 
"en": "Text color"
 
},
 
"default": "#ffffff"
 
},
 
{
 
"type": "text",
 
"id": "button_label",
 
"label": {
 
"en": "Button label"
 
}
 
},
 
{
 
"type": "url",
 
"id": "button_link",
 
"label": {
 
"en": "Button link"
 
}
 
},
 
{
 
"type": "color",
 
"id": "color_btn_bg",
 
"label": {
 
"en": "Background button color"
 
},
 
"default": "#ffffff"
 
},
 
{
 
"type": "color",
 
"id": "color_btn_text",
 
"label": {
 
"en": "Button text color"
 
},
 
"default": "#ffffff"
 
}
 
]
 
}
 
],
 
"presets": [
 
{
 
"name": {
 
"en": "Video Background"
 
},
 
"category": {
 
"en": "Main"
 
},
 
"blocks": [
 
{
 
"type": "video"
 
}
 
]
 
}
 
]
 
}
 
{% endschema %}

5. Open Assets –> in base.css file and paste the bellow code and save it

@media screen and (max-width: 767px) {
    .videoBackground .videoBox {
        padding: 100px 20px 80px !important;
    }
    .videoBackground .fullscreen-video-wrap {
        position: absolute !important;
        z-index: 1 !important;
    }
    .videoBackground .videoBoxInfo {
        padding: 10px !important;
    }
}

6. Go back to the theme Section where show customize button on the theme below click it

7. Add new section – Video Background and save it

8. Go to

computertips Shopify development tips