Issue with Full-Width Video on Landing Page – Need Help Adjusting Layout

[jscola]

Hi everyone,

I have a video on my landing page that’s set to full width, but I’m running into a problem. The video appears to be either underlined or out of place, as I’m unable to reach the progress bar, and the recommendations (which I’d like to hide) are only partially visible. I need help adjusting the layout to better frame the video so everything fits properly.

https://www.ciano.coffee/

Any suggestions or code adjustments would be greatly appreciated!

Thanks in advance!

[DaisyVo]

Hi @jscola

I can adjust the width and height of the video section, but even when I make it smaller, the progress bar still doesn’t appear—only the recommended videos are visible. If this works for you, we could try using this code. It seems like the issue only occurs on desktop.

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 768px){
.video-section deferred-media.video-section__media > iframe.js-youtube {
    width: 600px !important;
    height: 550px !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
}

Here is the result: https://prnt.sc/rkHeq4GFsF2P

You can adjust the width, height number as you want!

I hope this helps

Best,

Daisy

[jscola]

Hey Daisy, thanks for your comment. I get this result on desktop:

Im closer to get a solution to the existing problem. any other help is welcome. thank you!