Video background with text - just home page

I put a video background with text with the following code, It works fine.

But it’s appearing on all pages. How can I have this video only on the home page?

{%- 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’ %}

{%- if block.settings.video_link != blank -%}
<video class="video-js" loop autoplay preload="none" muted playsinline

poster=“https:{{ block.settings.video_image | img_url: ‘master’ }}”

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

{{ block.settings.title | escape }}

{% endif %}

{%- style -%}
.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}
{%- endstyle -%}

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

{{ block.settings.text }}
{% 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 }}

{% endif %}

{% else %}

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

{{ block.settings.title | escape }}

{% endif %}

{%- style -%}
.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}
{%- endstyle -%}

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

{{ block.settings.text }}
{% 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 }}

{% endif %}

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

{% else %}

This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%} .main-content .videoBackground { margin-top: -55px; } .videoBackground { height: 100%; 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; 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: 8px 15px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: normal; font-size: 14px; margin-top: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { color: #FFF; font-size: 30px; line-height: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { max-width: 500px; margin: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { font-size: 18px; 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: 500px; height: 100%; position: relative; padding: 0; } .videoBackground .fullscreen-video-wrap { position: relative; min-height: 300px; } .videoBackground .videoBoxInfo { padding: 40px 20px; background: #000; width: 100%; } }

{% 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”: “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”,

“label”: {

“en”: “Heading”

},

“default”: “Video slide”

},

{

“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”: “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”: “

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

}

},

{

“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 %}

Hi @Joao88 ,

I just added the same section on my site and did not have any problem. Can you provide link to your store?

https://mangit.myshopify.com/

Hello @Joao88

Refer this link: it might be helpful to you-

https://community.shopify.com/topic/1256251

https://joaogomesgago.art/

Thanks!

My mistake, I was putting the section in the wrong place, they work perfectly. Thank you!

Hello, Im having the same problem as you. The background video is on every page, and i want it be only on home page. Can you please share how you fix it?

Hi @Kristianradulov ,

Can you provide link to your store?

https://kr-customs.net/

thank you

@theycallmemakka , sorry to bother you but i tryed everything i could and nothing happend. Can you please help?

Hi @Kristianradulov ,

It looks like you are using same section on all the pages. I cannot find why this is happning on all the pages. I will require access to the theme in order to figure it out. If you can provide me acces to the theme, I can figure this out for you.

You can contact me if you want me to review this issue from theme level.