Problem with video on website.

Store Design
1

This is what my website looks like. It has a video the entire width of the website but it has a light filter over it or something and when i press play it shrinks and the filter goes away.

I want the video to cover the entire width of the website the whole time and i don’t want the filter to be over it when it’s not playing.

Any ideas? Thank you in advance.

AntonBjarki_0-1731645069776.png
AntonBjarki_0-1731645069776.png1918×1069 268 KB

AntonBjarki_1-1731645088461.png
AntonBjarki_1-1731645088461.png1915×1079 271 KB

2

Hi @AntonBjarki ,

To ensure that your video covers the entire width of the website at all times and that the filter doesn’t appear over it when the video is not playing, you’ll need to modify both the styling and the video behavior in the code.

Steps to Remove the Filter and Keep the Video Full-Width:1. Go to the Theme Code Editor:

  • From your Shopify Admin, navigate to Online Store > Themes.
  • Find your Impulse theme and click on Actions > Edit Code.

  1. Locate the Video Section:

    • In the Sections folder, locate the file that controls the video (often named something like hero-video.liquid , banner-video.liquid , or something similar).

  2. Adjust the Video Styling:

    • Find the part of the code where the video is embedded, and look for any overlay or filter class applied to the video container.
    • It may look something like this:

  
  

 

​

  • The video-overlay div is likely applying the filter. You need to hide this or remove it when the video is not playing.

  • Modify the CSS:

    • In the Assets folder, open the theme.css or base.css file.

    • Add the following CSS to ensure the video is always full-width and that the filter is removed:

/* Ensure video always takes full width */
.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust height to suit your design */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills entire container */
}

/* Remove the filter overlay when video is not playing */
.video-container .video-overlay {
  display: none !important;
}

/* If you want to display the overlay only when playing */
.video-container video:playing + .video-overlay {
  display: none;
}

Save and Preview:

  • Save the changes and refresh your website. The video should now cover the entire width of the website, and the filter will not appear when the video is not playing.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

It didn’t work. Adding the code to the theme.css didn’t do anything and there are no hero-video.liquid, banner-video.liquid or anything similar that had that code in it. Here is the website and password if you want to check it out.

Website: antonbjarkiolsen.com
Password: passwordpassword

Thank you so much!

4

@AntonBjarki Please follow below steps to play the video with the entire width of the website. Let us know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click the action button from the current theme and select “Edit code”.
  3. Go to “theme.liquid” file.
  4. Then find the “” tag and paste the below code before the tag and save the changes.
{% style %}
  .sections .featured-video-section .featured-video {
    width: 100%;
  }
{% endstyle %}

Result will be like,

Vinsinfo_0-1731660720591.png
Vinsinfo_0-1731660720591.png1365×726 145 KB

Regarding the light filter over the video, it seems there is no filter over the video, the thumbnail image itself is in the same color.
https://antonbjarkiolsen.com/cdn/shop/files/preview_images/5142d3517391423cbc4e63ad0bb515f2.thumbnail.0000000000_2000x.jpg?v=1730982763

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

1 Like
5

Thank you, that fixed the width.

But im 100% sure if you watch the propellor on the front of the plane when you press play that it gets much darker after pressing play.

6

@AntonBjarki We’re glad to hear our solution resolved the width issue! and it seems you have updated the thumbnail image now. Feel free to reach out to us anytime if you need further assistance in the future. We’re here to help!

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.