Mobile and desktop video

Store Design
, , ,

Topic summary

Goal: Make a 16:9 video fill the screen on both desktop and mobile. Mobile view was cropped; desktop had extra space.

Key points:

  • Constraint: A 16:9 video cannot fully cover a 9:16 mobile screen without significant cropping; separate landscape (desktop) and portrait (mobile) videos may be needed for perfect fit.
  • Theme-dependent solution; a preview link was requested and provided.

Proposed fixes (applied via the section’s “Custom CSS” setting):

  • Option 1: Set the video container height to the full viewport minus header heights (desktop 76px, mobile 68px): uses calc(100vh - header). Addresses differing header heights.
  • Option 2 (simpler): If the header is set to “Sticky: Always,” set the video container to height: 100vh; width: 100%; padding-bottom: 0.

Outcome:

  • The simpler 100vh approach worked for the requester, with no visible change to the header.

Status: Resolved. Remaining consideration: For true full-screen coverage on mobile without cropping, separate portrait video content may still be necessary.

Summarized with AI on December 15. AI used: gpt-5.
1

I am trying to adapt my videos to full capture the screen on desktop and on mobile. Mobile cuts short and the desktop has some more room left. Can someone help? I have tried to go through other people’s discussion post who got help but none of the codes seem to work. I don’t know if I am doing something wrong or not.

2

I am using a 16:9 resolution on my video. I want my video to fill the mobile screen and keep the desktop display,

3

Where could I find that part? I cannot seem to find it

1 Like
4

You need to share a (preview) link to the page you’re working on.

The solution is theme-dependent and may differ between sections.

Also, one can’t expect the 16:9 video to cover entire mobile screen which is 9:16 without cropping, which will be significant in this case.

You may need to have separate videos for landscape (desktop) and mobile (portrait).

5

aldoresavant.com is my website. Password is: aldore

6

David, I do not see the code you are mentioning

7

This can go into “Custom CSS” setting of this section:

.video-section .video-section__media {
  height: calc(100vh - 76px);
  width: 100%;
  padding-bottom: 0;
}
@media (max-width:990px){
  .video-section .video-section__media {
    height: calc(100vh - 68px);
  }
}

It’s not the best because the height of the header changes 76 px on desktop and 68px on mobile

8

If you set your header to Sticky: Always, i believe it will be simpler:

.video-section .video-section__media {
  height:100vh;
  width: 100%;
  padding-bottom: 0;
}
9

That worked perfectly! The header was not changed at all. Thank you!!

10

I mean, header originally has different height on mobile and desktop, so I had to account for this in my code.