Problem loading video from mobile

Technical Q&A

Topic summary

A user is experiencing an issue where a header video displays correctly on desktop but shows only a black screen on mobile devices.

Technical Details:

  • The implementation uses HTML5 video with CSS positioning
  • Video is set to autoplay, muted, loop, and playsinline
  • Hosted on Shopify CDN (MP4 format)
  • Includes text overlay and CTA button positioned over the video

Code Structure:

  • Full viewport height container with centered video using object-fit: cover
  • Custom font implementation (‘Dashen’)
  • Responsive font sizing using viewport units (vw)
  • Z-index layering for video, text, and button elements

Current Status:
The issue remains unresolved with no responses yet. Common mobile video loading problems typically involve autoplay restrictions, codec compatibility, or file size/format issues on mobile browsers.

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

Hi, I uploaded a video at the header, it’s good, but when I log in from my personal mobile, the screen is black and the video doesn’t load.
can you help me with that?

this is the code

<style>
@font-face {
  font-family: 'Dashen';
  src: url('נתיב לקובץ הפונט שלך/Dashen.ttf') format('truetype');
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.text-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Dashen', sans-serif;
  font-size: 12vw;
  color: white;
  text-align: center;
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  z-index: 2;
}

.cta-button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  font-size: 5vw;
  font-family: 'Dashen', sans-serif;
  color: white;
  background-color: #74d8d7;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 2;
}

.cta-button:hover {
  background-color: #5fbab8;
}

@media (min-width: 768px) {
  .text-overlay {
    font-size: 6rem;
  }

  .cta-button {
    font-size: 1.5rem;
    padding: 20px 40px;
  }
}
</style>

<div class="video-container">
  <video muted autoplay playsinline loop preload="auto" controlslist="nodownload nofullscreen noremoteplayback">
    <source src="https://cdn.shopify.com/videos/c/o/v/76a125dcff8d4c6d9cf3d0adf68183b9.mp4" type="video/mp4">
    הדפדפן שלך לא תומך בתג הוידאו.
  </video>
  <div class="text-overlay">ביטחון התינוק שלך <br>מתחיל כאן</div>
  <a href="https://7ae6d6-3d.myshopify.com/products/4pcs-set-first-aid-kit-choking-device-adults-children-2-size-choking-rescue-kits-home-asphyxia-rescue-device-anti-suffocaation" class="cta-button">למוצר מציל חיים</a>
</div>