How can I incorporate a full-width video background?

[MASONBLACK]

I would like to have the option of using a video in the same way an image banner works. So the full width of the page.

Not sure why this isn’t already an option, but the only way to currently add video, as you’ll know, is a small video that’s not right.

can anyone help?

thank you

[Keshan97]

Hello!

Adding a full-width video banner to your Shopify store can definitely enhance the visual appeal and engagement on your site. It’s a great idea, and I can guide you on how to implement it.

The easiest way to add a full-width video is by editing your theme’s code to include a video element in the header or wherever you’d like the video banner to appear. Here’s a general step-by-step guide on how to do this:

1. Choose Your Video: Make sure your video is high quality and optimized for web use. It should be hosted on a platform that allows embedding, like YouTube or Vimeo, or hosted directly in your Shopify Files section.

2. Edit Your Theme Code:

   • From your Shopify admin dashboard, go to Online Store > Themes.
   • Find the theme you want to edit, and click Actions > Edit code.
   • You’ll want to add the video code to the header.liquid file or directly in the index.liquid file if you want it on the homepage only.

3. Insert the Video Code: You can use HTML5 to embed the video directly. Here’s a sample code snippet:

Replace “YOUR_VIDEO_URL.mp4” with the actual path to your video. If you’re using a video from YouTube or Vimeo, you’ll need to use their specific iframe embed code instead.

• Adjust the Style: The CSS in the sample ensures the video is full-width and covers the designated area, much like a full-width image banner. You might need to adjust the CSS to fit your specific theme and design needs.
• Test Your Video: After saving the changes, preview your theme to make sure the video looks and behaves as expected across different devices and browsers.
• Publish: If everything looks good, publish your changes.

If you’re not comfortable editing theme code directly, you might consider using a Shopify app designed for adding video backgrounds or banners. Apps like “Video Background” or “Easy Video” can provide more control and features without needing to touch the code.

[MASONBLACK]

Thank you. I’ve got this to work, kinda.

I didn’t know where to paste the code so I put it in Header.liquid right before the JASON code started. It’s now part of my header and I can no longer view the burger menu on mobile.

also, I don’t want it on every page but I can’t find index.liquid? Where is that located?

thanks

[Keshan97]

If you can share the link of your store I will able to guide you correctly

[system]

For this option, you can do it following process:

Type 1: Embedding videos using custom code :

These are video banners that you can add directly to your theme by customizing the code. They offer a lot of flexibility but require some coding knowledge.

Type 2: Video Banners Using Apps

Different apps are available to add video banners without needing to code. They come with pre-built templates and drag-and-drop features.

Type 3: Video Banners Using Themes:

Some Shopify themes come with built-in support for video banners. This method is the simplest, as it does not require any coding or third-party apps. You can add a video directly through the theme customizer, making it an easy and efficient option.

For the custom code:

• image-banner.liquid:

{%- if section.settings.my_video_background_banner != blank -%}
    <div class="my_video_background_banner">  
      <video autoplay muted loop id="myVideoBackground">
        <source src="{{ section.settings.my_video_background_banner }}" type="video/mp4">
      </video>
    </div>
{%- endif -%}

Now we will set a condition if the video is uploaded, then the image will not show. So let’s add the conditions.

{%- if section.settings.my_video_background_banner == blank -%} 

// your exisiting code

{%- endif -%}

Now we have to add the schema code where a field will be added to upload the video.

//schema
{
    "type": "url",
    "id": "my_video_background_banner",
    "label": "My Video Background Banner"
},

Now we have to add the css code to responsive the video for any devices.

Go to Assets > base.css

Now copy paste the code

//CSS Code
.my_video_background_banner {
    position: absolute;
    width: 100%;
    height: 100%;
}

If you want, you can read this article complete step by step process with visualize: https://shopidevs.com/add-shopify-video-to-banner-section/

[lprowena]

hi, tried the method above, no issue in the video appearing on the website. but it seems I cant set it as appear only on homepage and not on all pages. tried to paste the code in theme.liquid file but still the same. please advise

[Hey_Jak]

How To Add A Video Background in shopify by heyjak

How to add video background banner in Shopify like Rhode Skin or Louis Vuitton

[DaSebTru]

I used this for my store, it sorta worked. The button wont disappear after you scroll down and will appear on the hamburger mobile menu. Would be a 10/10 if that feature could be patched.

[Hey_Jak]

It’s doable, but it may vary based on the theme.