Why is my video background not scaling or auto-playing on mobile?

Store Design
1

Hi!

So I’m having trouble with my video backgrounds on my website. It fits perfectly on desktop display but then changed to mobile display, the videos are not automatically playing and I have all this extra space. I really don’t know much about coding but would love some help with thescaling and auto play. Thanks !!

Screen Shot 2023-05-16 at 7.33.18 pm.png
Screen Shot 2023-05-16 at 7.33.18 pm.png2880×1800 355 KB

Screen Shot 2023-05-16 at 7.33.53 pm.png
Screen Shot 2023-05-16 at 7.33.53 pm.png2880×1800 423 KB

For the bottom video background, it continues past the footer???
For the bottom video background, it continues past the footer???2880×1800 354 KB

2

  1. Check video format and compatibility: Ensure that the video format you’re using is compatible with mobile devices. MP4 is a widely supported format. Also, verify that the video file size is optimized for web playback.

  2. Enable autoplay on mobile: Autoplay behavior on mobile devices can be restricted due to user preferences and data usage concerns. To enable autoplay on mobile, you can use the playsinline attribute in the video element and the muted attribute to ensure the video plays without audio.

    Example:

Responsive video scaling: To ensure the video background fits properly on different screen sizes, you can use CSS to control the scaling and dimensions. Apply the appropriate styles to the video element or its container to make it responsive.

Example:

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}