Why aren't the two square videos showing up on all mobile devices in the mobile version of my Webflow site?

Square videos not displaying on certain mobile devices likely indicates an issue with how the videos are embedded, sized, or loaded in the mobile viewport.

1. Check Video Embed Method

• If you're using Embed elements (custom code), verify that the embed is responsive and doesn’t use fixed widths or heights.
• YouTube/Vimeo embeds must include mobile-friendly attributes like loading="lazy" and width/height set to percentage or auto.
• Avoid using raw HTML with fixed-pixel dimensions as they may exceed the viewport on smaller devices.

2. Inspect Display and Visibility Settings

• Select the video element in the Designer, then verify visibility settings under each breakpoint:
• Check the Display property—ensure it’s not set to “Display: None” on mobile.
• Look at Overflow settings—if the container has overflow hidden and the video is positioned incorrectly, it might not appear.

3. Set Correct Sizing and Aspect Ratio

• Make sure the parent container has defined dimensions or is using Responsive Aspect Ratio techniques, such as using padding-bottom for intrinsic ratio.
• For square videos, set width and height to be equal OR use a fixed aspect ratio (like 1:1) with padding-bottom: 100% in a wrapper div.

4. Check Positioning and Z-Index

• Ensure the videos aren’t accidentally placed behind other elements:
• Check Z-index values.
• Confirm absolute/relative positioning isn’t pushing the video off-screen.

5. Inspect Custom Code and Scripts

• If you're loading videos via custom JavaScript, make sure the script runs on all devices.
• Disable any interactions or animations temporarily to see if they’re hiding or delaying the video.

6. Test on Actual Devices and Emulators

• Use Webflow's preview and developer tools in Chrome or Safari to simulate mobile devices.
• Also test on real mobile devices, as some embed restrictions apply only on physical Android/iOS browsers.

7. Review Hosting Platform (If Embedded)

• If you host your own video rather than using a platform like YouTube or Vimeo, ensure:
• The video format is compatible with mobile browsers (MP4 is generally safe).
• Proper MIME type is delivered by your server.
• The file size isn’t too large, especially on mobile connections.

Summary

To fix square videos not appearing on mobile, ensure your embed is responsive, the display settings are correct at all breakpoints, the containers maintain a proper 1:1 aspect ratio, and there are no conflicting positioning or script issues. Test across real devices for accurate debugging.