Is there any way to make this video appear on a mobile device without cropping the text?

Store Design

Topic summary

A user is experiencing an issue where a video displays correctly on desktop but gets cropped on mobile devices, cutting off important text content.

Two screenshots demonstrate the problem: the desktop version shows the full video with visible text, while the mobile version crops the content significantly.

The user has attempted several CSS solutions without success, including:

  • Setting width and height to auto
  • Adding media queries

Their current CSS uses fixed positioning with 100% width/height and object-fit: cover, which likely causes the cropping issue on smaller screens. The code also includes styling to hide header, footer, and other elements.

A community member has requested the store URL and password to investigate further. The discussion remains open, awaiting technical assistance to resolve the responsive video display issue.

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

Video on a desktop

obraz_2023-06-28_123211829.png
obraz_2023-06-28_123211829.png1183×843 70.2 KB

Video on a mobile phone

obraz_2023-06-28_123219012.png
obraz_2023-06-28_123219012.png372×845 112 KB

I tried to change the width and height to auto, and also to add an media query but it didn’t work.

<style>
  .header-wrapper,
  footer.footer {
    display: none !important;
  }

  .drawer {
    visibility: hidden;
  }

  .cart__checkout-button {
    max-width: none;
    background: #ffffff;
    color: #000000;
  }

  video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

@media only screen and (max-width: 767px) {
  video {
    width: 100%;
    height: auto;
  }
}

</style>

<video autoplay muted loop playsinline id="myVideo">
  <source src="https://cdn.shopify.com/videos/c/o/v/069349678509454a95d205f7e240cf62.mp4" type="video/mp4" playsinline>
</video>
2

Hi @Loftop .

Please Share your store URL and password.

3

https://piersclo.myshopify.com