Video Banner Cropping On Desktop View

[EZDBsDesigns]

Hello, I am trying to implement a video banner on my site that works well for both mobile and desktop views. Mobile is perfect. However desktop view seems to have a pixel width related issue that causes the video to be cropped differently depending on how wide the browser window is. On a 2560x1440p monitor, half my logo isn't even visible, it's being cut off at the bottom. But if I shrink the size of my browser window it starts to fix itself.

Website: www.ezdbsdesigns.com
Password: beonte

I did use this website as a guide on how to get this far, if this helps: https://www.fmrwebdesign.com/how-to-add-shopify-dawn-theme-video-banner-in-2024/#step-3:-create-a-cs...

Are there any further code changes that would fix this? Thank you all for your time!

[kevinkarma55]

Hi,

I totally understand your issue and I can suggest two solutions:
1. you need to separate hot text and video have video without text and add the text and HTML element

2. stop video stretch after a certain width of the screen so that it will not cut text 

[EZDBsDesigns]

What would I need to do to make #2 happen?

[kevinkarma55]

Ok its pretty easy, 
Go to your code edit and find a file called `section-video-banner.css` and find following CSS property: 

@media screen and (min-width: 1320px) {
    .banner.video-background {
        min-height: 72rem;
    }
}

and change it to following by adding those last two property:

@media screen and (min-width: 1320px) {
    .banner.video-background {
        min-height: 72rem;
        max-width: 1900px;
        margin: 0 auto;
    }
}

so basically what that will do is video container will not stretch after the 1900px width of the screen

[EZDBsDesigns]

That is a lot better. Doesn't center it all the way but at least it is visible. The video is 1920x1080, not sure if that is useful information or not. The site is updated with the change so you can see.

[kevinkarma55 · Accepted solution]

nice, try to update value to following to make it more center:

@media screen and (min-width: 1320px) {
    .banner.video-background {
        min-height: 80rem;
        max-width: 1690px;
        margin: 0 auto;
    }
}

[EZDBsDesigns]

That did the trick! Thank you so much for your time, knowledge and help!

[kevinkarma55]

I'm happy to help, knowledge are meant to be shared