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.
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