Background video on every page. I only want it to show up on homepage

Store Design
1

Hi, I found a code on yt to add a background video to my website but it shows up on all of my pages. I only want to be present in my homepage. What I did is I made a new section called “background-videos.liquid” and pasted this code there. What do I need to add so it only shows on the home page?

{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{% if block.type == ‘video’ %}

{%- if block.settings.video_link != blank -%}
{%- else -%}
{%- endif -%}
{% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}
{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% else %}
{%- if block.settings.image_bg != blank -%}
{%- else -%}
{%- endif -%}
{% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}
{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% endif %} {%- endfor -%}

{% else %}

This section doesn't currently include any content. Add content to this section using the sidebar.
{%- endif -%}

{% style %}
:root {
–onhow-text-color-{{ section.id }}: {{ section.blocks[0].settings.color_text }};
–onhow-btn-bg-{{ section.id }}: {{ section.blocks[0].settings.color_btn_bg }};
–onhow-btn-text-{{ section.id }}: {{ section.blocks[0].settings.color_btn_text }};
–onhow-bg-color-{{ section.id }}: {{ section.blocks[0].settings.color_bg | default: ‘#16165b’ }};
–onhow-heading-size-{{ section.id }}: {{ section.blocks[0].settings.heading_size | default: 3.8 }}rem;
–onhow-description-size-{{ section.id }}: {{ section.blocks[0].settings.description_size | default: 1.1 }}rem;
–onhow-button-size-{{ section.id }}: {{ section.blocks[0].settings.button_size | default: 1.5 }}rem;
}

.onhow-video-background {
position: relative;
margin-top: 0;
z-index: 1;
}

.onhow-video-box,
.onhow-image-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
min-height: calc((100vh - 165px) * 0.6);
max-height: 480px;
width: 100%;
overflow: hidden;
z-index: 1;
}

.onhow-fallback-image,
.onhow-background-image,
.onhow-background-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}

.onhow-background-color {
background-color: var(–onhow-bg-color-{{ section.id }});
}

.onhow-fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

.onhow-video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

.onhow-content-box {
position: relative;
padding: 30px 20px;
text-align: center;
z-index: 3;
width: 100%;
max-width: 900px;
overflow: hidden;
}

.onhow-content-title {
color: var(–onhow-text-color-{{ section.id }});
font-size: var(–onhow-heading-size-{{ section.id }});
line-height: 1.2;
margin-bottom: 20px;
font-family: var(–font-heading-family);
font-weight: var(–font-heading-weight);
}

.onhow-content-description {
max-width: 600px;
margin: 0 auto 25px;
}

.onhow-content-description p {
color: var(–onhow-text-color-{{ section.id }});
font-size: var(–onhow-description-size-{{ section.id }});
line-height: 1.6;
font-family: var(–font-body-family);
font-weight: var(–font-body-weight);
}

.onhow-content-btn {
display: inline-block;
padding: 12px 30px;
text-decoration: none;
font-size: var(–onhow-button-size-{{ section.id }});
line-height: 1.5;
font-weight: 500;
text-align: center;
cursor: pointer;
background: var(–onhow-btn-bg-{{ section.id }});
color: var(–onhow-btn-text-{{ section.id }});
border: 1px solid transparent;
transition: all 0.3s ease;
font-family: var(–font-body-family);
min-width: 180px;
}

.onhow-content-btn:hover {
opacity: 0.9;
}

.onhow-placeholder-noblocks {
text-align: center;
padding: 50px 20px;
max-width: 500px;
margin: 0 auto;
}

@media screen and (max-width: 767px) {
.onhow-video-background {
margin-top: 0;
}

.onhow-video-box,
.onhow-image-box {
min-height: 300px;
height: auto !important;
}

.onhow-content-title {
font-size: calc(var(–onhow-heading-size-{{ section.id }}) * 0.579);
display: block;
}

.onhow-content-description p {
font-size: calc(var(–onhow-description-size-{{ section.id }}) * 0.909);
}

.onhow-content-btn {
display: inline-block;
min-width: 150px;
padding: 10px 20px;
font-size: calc(var(–onhow-button-size-{{ section.id }}) * 0.6);
}
}
{% endstyle %}

{% schema %}
{
“name”: { “en”: “Video Background” },
“class”: “onhow-video-background”,
“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 Background”
},
{
“type”: “range”,
“id”: “heading_size”,
“min”: 2,
“max”: 6,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Heading size” },
“default”: 3.8
},
{
“type”: “richtext”,
“id”: “text”,
“label”: { “en”: “Description” },
“default”: { “en”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

” }
},
{
“type”: “range”,
“id”: “description_size”,
“min”: 0.8,
“max”: 2,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Description size” },
“default”: 1.1
},
{
“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”: “range”,
“id”: “button_size”,
“min”: 0.8,
“max”: 2,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Button text size” },
“default”: 1.5
},
{
“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”: “#000000”
},
{
“type”: “range”,
“id”: “button_radius”,
“min”: 0,
“max”: 40,
“step”: 2,
“unit”: “px”,
“label”: “Button corner radius”,
“default”: 4
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “color”,
“id”: “color_bg”,
“label”: { “en”: “Background color” },
“default”: “#16165b”
},
{
“type”: “image_picker”,
“id”: “image_bg”,
“label”: { “en”: “Background image” }
},

{
“type”: “header”,
“content”: { “en”: “Text” }
},
{
“type”: “text”,
“id”: “title”,
“default”: “Image Background”,
“label”: { “en”: “Heading” }
},
{
“type”: “range”,
“id”: “heading_size”,
“min”: 2,
“max”: 6,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Heading size” },
“default”: 3.8
},
{
“type”: “richtext”,
“id”: “text”,
“label”: { “en”: “Description” },
“default”: { “en”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

” }
},
{
“type”: “range”,
“id”: “description_size”,
“min”: 0.8,
“max”: 2,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Description size” },
“default”: 1.1
},
{
“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”: “range”,
“id”: “button_size”,
“min”: 0.8,
“max”: 2,
“step”: 0.1,
“unit”: “rem”,
“label”: { “en”: “Button text size” },
“default”: 1.5
},
{
“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”: “#000000”
},
{
“type”: “range”,
“id”: “button_radius”,
“min”: 0,
“max”: 40,
“step”: 2,
“unit”: “px”,
“label”: “Button corner radius”,
“default”: 4
}
]
}
],
“presets”: [
{
“name”: { “en”: “Video Background” },
“category”: { “en”: “Media” },
“blocks”: [
{ “type”: “video” }
]
}
]
}
{% endschema %}

2

Hi @Denis6
Please replace above code with this

{% if template contains "index" -%}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{% if block.type == 'video' %}

{%- if block.settings.video_link != blank -%}

{%- else -%}

{%- endif -%}

{% if block.settings.title != blank %}
# {{ block.settings.title | escape }}
{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% else %}

{%- if block.settings.image_bg != blank -%}

{%- else -%}

{%- endif -%}

{% if block.settings.title != blank %}
# {{ block.settings.title | escape }}
{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% endif %}
{%- endfor -%}

{% else %}

This section doesn't currently include any content. Add content to this section using the sidebar.

{%- endif -%}
{%- endif -%}

{% style %}
:root {
--onhow-text-color-{{ section.id }}: {{ section.blocks[0].settings.color_text }};
--onhow-btn-bg-{{ section.id }}: {{ section.blocks[0].settings.color_btn_bg }};
--onhow-btn-text-{{ section.id }}: {{ section.blocks[0].settings.color_btn_text }};
--onhow-bg-color-{{ section.id }}: {{ section.blocks[0].settings.color_bg | default: '#16165b' }};
--onhow-heading-size-{{ section.id }}: {{ section.blocks[0].settings.heading_size | default: 3.8 }}rem;
--onhow-description-size-{{ section.id }}: {{ section.blocks[0].settings.description_size | default: 1.1 }}rem;
--onhow-button-size-{{ section.id }}: {{ section.blocks[0].settings.button_size | default: 1.5 }}rem;
}

.onhow-video-background {
position: relative;
margin-top: 0;
z-index: 1;
}

.onhow-video-box,
.onhow-image-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
min-height: calc((100vh - 165px) * 0.6);
max-height: 480px;
width: 100%;
overflow: hidden;
z-index: 1;
}

.onhow-fallback-image,
.onhow-background-image,
.onhow-background-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}

.onhow-background-color {
background-color: var(--onhow-bg-color-{{ section.id }});
}

.onhow-fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

.onhow-video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

.onhow-content-box {
position: relative;
padding: 30px 20px;
text-align: center;
z-index: 3;
width: 100%;
max-width: 900px;
overflow: hidden;
}

.onhow-content-title {
color: var(--onhow-text-color-{{ section.id }});
font-size: var(--onhow-heading-size-{{ section.id }});
line-height: 1.2;
margin-bottom: 20px;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
}

.onhow-content-description {
max-width: 600px;
margin: 0 auto 25px;
}

.onhow-content-description p {
color: var(--onhow-text-color-{{ section.id }});
font-size: var(--onhow-description-size-{{ section.id }});
line-height: 1.6;
font-family: var(--font-body-family);
font-weight: var(--font-body-weight);
}

.onhow-content-btn {
display: inline-block;
padding: 12px 30px;
text-decoration: none;
font-size: var(--onhow-button-size-{{ section.id }});
line-height: 1.5;
font-weight: 500;
text-align: center;
cursor: pointer;
background: var(--onhow-btn-bg-{{ section.id }});
color: var(--onhow-btn-text-{{ section.id }});
border: 1px solid transparent;
transition: all 0.3s ease;
font-family: var(--font-body-family);
min-width: 180px;
}

.onhow-content-btn:hover {
opacity: 0.9;
}

.onhow-placeholder-noblocks {
text-align: center;
padding: 50px 20px;
max-width: 500px;
margin: 0 auto;
}

@media screen and (max-width: 767px) {
.onhow-video-background {
margin-top: 0;
}

.onhow-video-box,
.onhow-image-box {
min-height: 300px;
height: auto !important;
}

.onhow-content-title {
font-size: calc(var(--onhow-heading-size-{{ section.id }}) * 0.579);
display: block;
}

.onhow-content-description p {
font-size: calc(var(--onhow-description-size-{{ section.id }}) * 0.909);
}

.onhow-content-btn {
display: inline-block;
min-width: 150px;
padding: 10px 20px;
font-size: calc(var(--onhow-button-size-{{ section.id }}) * 0.6);
}
}
{% endstyle %}

{% schema %}
{
"name": { "en": "Video Background" },
"class": "onhow-video-background",
"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 Background"
},
{
"type": "range",
"id": "heading_size",
"min": 2,
"max": 6,
"step": 0.1,
"unit": "rem",
"label": { "en": "Heading size" },
"default": 3.8
},
{
"type": "richtext",
"id": "text",
"label": { "en": "Description" },
"default": { "en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" }
},
{
"type": "range",
"id": "description_size",
"min": 0.8,
"max": 2,
"step": 0.1,
"unit": "rem",
"label": { "en": "Description size" },
"default": 1.1
},
{
"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": "range",
"id": "button_size",
"min": 0.8,
"max": 2,
"step": 0.1,
"unit": "rem",
"label": { "en": "Button text size" },
"default": 1.5
},
{
"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": "#000000"
},
{
"type": "range",
"id": "button_radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Button corner radius",
"default": 4
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": { "en": "Background color" },
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": { "en": "Background image" }
},

{
"type": "header",
"content": { "en": "Text" }
},
{
"type": "text",
"id": "title",
"default": "Image Background",
"label": { "en": "Heading" }
},
{
"type": "range",
"id": "heading_size",
"min": 2,
"max": 6,
"step": 0.1,
"unit": "rem",
"label": { "en": "Heading size" },
"default": 3.8
},
{
"type": "richtext",
"id": "text",
"label": { "en": "Description" },
"default": { "en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" }
},
{
"type": "range",
"id": "description_size",
"min": 0.8,
"max": 2,
"step": 0.1,
"unit": "rem",
"label": { "en": "Description size" },
"default": 1.1
},
{
"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": "range",
"id": "button_size",
"min": 0.8,
"max": 2,
"step": 0.1,
"unit": "rem",
"label": { "en": "Button text size" },
"default": 1.5
},
{
"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": "#000000"
},
{
"type": "range",
"id": "button_radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Button corner radius",
"default": 4
}
]
}
],
"presets": [
{
"name": { "en": "Video Background" },
"category": { "en": "Media" },
"blocks": [
{ "type": "video" }
]
}
]
}
{% endschema %}

and check if it works
Thanks!

3

Hi @Denis6

To make your background-videos.liquid section appear only on the homepage, wrap the entire code in a conditional that checks if the current page is the home page.

Just add this line at the top of your section file, right before any HTML or Liquid code:

{% if template.name == 'index' %}

And at the very end of your code, add:

{% endif %}

So your file should look like this:

{% if template.name == 'index' %}
  
{% endif %}

This way, the section will only render on the homepage and will be hidden from all other pages.

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!