Background Video Full Width at all times on Dawn 7.0.1

Technical Q&A
,

Topic summary

A user is experiencing white space issues with a background video on their Shopify Dawn 7.0.1 theme when resizing the page. They shared their current CSS code and site URL seeking a solution.

Proposed Solutions:

Multiple developers offered CSS fixes targeting full-width video display:

  • GemPages suggested adding width: 100vw, height: 100vh, object-fit: cover, and position: fixed with specific positioning values to the video element

  • PageFly-Victor provided two approaches:

    1. Targeting .video.small--hide with fixed positioning and object-fit: cover
    2. Using media queries to adjust video width at different breakpoints (750px and 749px)

  • LitExtension recommended a code change with a screenshot reference

  • KetanKumar reported being unable to reproduce the issue, suggesting it may be browser or system-specific

Status: The discussion remains open with multiple untested solutions provided. The user has not confirmed which approach resolved the issue.

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

Hello,

How do i make background video full width at all times. I notice when i resize page it shows a white space.

Does anyone know the code?

Any help is appreciated.

Thank you.

https://silicorestudios.com/

Current code:

video { display: block; margin: 0 auto; width: 100%; height: 50%; } @media (max-width: 749px) { .small--hide {display: none !important;} } @media (min-width: 750px) { .medium-up--hide {display: none !important;} }

{% comment %} Desktop Show {% endcomment %}

{% comment %} Mobile Show {% endcomment %}

https://silicorestudios.com/

scotticus_0-1670293929993.png
scotticus_0-1670293929993.png200Ă—191 20.1 KB

scotticus_1-1670293929882.jpeg

scotticus_2-1670293930108.png
scotticus_2-1670293930108.png200Ă—143 34.3 KB

1 Like
2

@scotticus

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

3

Hello @scotticus

I would like to give you some recommendations to support you.

Let’s try adding this code :

#shopify-section-template--17087053726007__2326934d-74c3-4794-87e2-cce0da6d87be video{
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: -1 !important;
}

Hope my recommendation can work and support for you!
Kind & Best regards!
GemPages Support Team

1 Like
4

Hi @scotticus ,

This is Victor from PageFly - Landing Page Builder App.

You can go to Online store => themes => actions => edit code and add this code on file base.css

video.small–hide{
height: 100vh !important;

object-fit: cover !important;

position: fixed !important;

}

Hope this answer helps.
Best regards,
Victor | PageFly

1 Like
5

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom
Online Store ->Theme ->Edit code
Assets → base.css

@media(min-width: 750px) {
.small--hide {
width: auto !important;
}
}
@media(max-width: 749px) {
.medium-up--hide {
width: 100% !important;
}
}

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

1 Like
6

Hi @scotticus ,

Please change code here:

Screenshot.png
Screenshot.png735Ă—691 41.1 KB

Change: video.small–hide => video

1 Like