Full width video using on Debut home page?

Store Design
,

Topic summary

A user seeks help making a video on their Debut theme homepage display at full width, adjusting responsively across desktop and mobile devices.

Solutions Provided:

Multiple community members offered CSS-based solutions:

  • CSS approach: Add code to theme.css targeting .video-section.page-width with properties like max-width: 100% and padding: 0 !important

  • Alternative method: Insert custom <style> tags in theme.liquid file above the </body> tag with similar CSS rules

  • Section-specific targeting: Some solutions reference specific Shopify section IDs for more precise styling

Current Status:

One user confirmed success on desktop but reports an issue on mobile—the video doesn’t autoplay and displays as a grey box with a play button instead. The discussion remains open regarding the mobile autoplay problem, with no solution yet provided for this secondary issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’ve tried looking for answers and code online but I gather that solutions are case by case depending on websites.

Can anybody assist with the code and where to place it? id like the video at the bottom of my homepage to be full width and adjust depending on window size or desktop/mobile.

www.saintside.com

2

Hello @donotdisturb ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code below:

.video-section .page-width {
    padding: 0 !important; 
    max-width: 100%;
}

Thanks

3

Hey @donotdisturb

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691816433718.png
Moeed_0-1691816433718.png1909×892 120 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hi @donotdisturb

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

#shopify-section-99a70bb5-c663-47ce-9f25-0e1c4c710def .page-width {padding: 0 !important; max-width: 100% !important; width: 100% !important;}

#shopify-section-99a70bb5-c663-47ce-9f25-0e1c4c710def .page-width .video–background {width: 100% !important; left: 0 !important;}

Regards,

San

5

Hi @donotdisturb

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.video-section .page-width {
    padding: 0px !important;
    max-width: 100% !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

6

Hunter forever for someone that knew what I was trying to do…Threw this code in and works perfectly on desktop, but on mobile it doesn’t want to autoplay, just get grey box with a play button…suggestions!?