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

TL;DR
  • Ensure videos are in MP4 (H.264) format and correctly embedded using HTML5 or supported platforms like YouTube/Vimeo.  
  • Check visibility settings in Webflow Designer, ensuring videos and parent elements are visible on all mobile breakpoints.  
  • Confirm responsive sizing and overflow settings, and include mobile-friendly embed attributes like playsinline and muted.

Two square videos not appearing on mobile devices typically indicates an issue with video embedding, visibility settings, or file compatibility. Here's how to troubleshoot and resolve this in Webflow.

​

1. Check Video Source and Format

  • Ensure videos are MP4 and H.264 encoded, which is widely supported on all modern browsers and mobile devices.
  • If you're using Webflow’s native Video element, it only supports YouTube and Vimeo embeds. For direct uploads, use a Video file in a native HTML5 embed via an Embed element.
  • For YouTube embeds, ensure videos are not region-restricted, private, or disabled for embedding.

​

2. Review Webflow’s Element Visibility Settings

  • Select the video elements in Webflow Designer.
  • In the Style panel, scroll to Layout > Display.
  • Make sure the videos are not set to display: none on mobile breakpoints (check Tablet, Mobile Landscape, Mobile Portrait).
  • Also check that their parents’ visibility or overflow settings do not hide the videos.

​

3. Inspect Overflow and Size Constraints

  • Ensure parent containers have enough space and are not hiding content with overflow: hidden.
  • Verify that your video size (width and height) is adapting properly:
  • Use percentage-based sizing or VW/VH units for responsiveness.
  • Avoid hardcoded pixel dimensions that might collapse on small screens.

​

4. Confirm Video Embed Settings

  • If using a YouTube Embed, ensure parameters like ?rel=0&playsinline=1 are included to improve mobile compatibility.
  • If using the Embed element, make the <video> tag include the attribute playsinline and muted autoplay if required by mobile policy.

​

5. Test on Actual Devices and Browsers

  • Use Webflow’s Preview mode and also test on real devices.
  • Try Safari (iOS), Chrome, and Chrome Android to rule out browser-specific issues.

​

6. Check for Custom Code Conflicts

  • Open Page Settings > Custom Code.
  • Look for any custom JavaScript or CSS that could be inadvertently hiding or altering video behavior on mobile (e.g., using display: none or scripts that control autoplay).

​

Summary

Your square videos likely aren't visible on mobile because of visibility styles, unsupported video formats, or incorrect embed configurations. Verify video format, check the visibility on all breakpoints, and ensure embeds include mobile-friendly attributes like playsinline.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Does exporting code from Webflow to a hosting provider like Hostinger include the CMS collection, or will the exported code not contain a CMS?
How can I make both the category and subcategory links have an active status on the catalog page in Webflow's CMS collections?
Can Webflow integrate with the dropshipping method offered by this store?
How do I set the scroll stop point to be 60px above each section's H2 in Webflow for two pages with anchor links to sections "Services" and "Products We Love" where the scroll stop point is not consistent?
When will more details about what Webflow can do be available?
How can I block form submissions with public emails on a Webflow Collection page template, and only allow submissions from work emails? I've implemented suggested code before the </body> tag, but a form submission still went through. If it's not possible to filter public emails, I'm considering switching to an embedded Hubspot form with their blocking list feature. However, I liked the idea of manually adding and removing domains to the blocking list, which is not possible with Hubspot. Can someone please help me troubleshoot and provide a solution for this issue on Webflow?
Is Webflow as powerful as WordPress for SEO optimization?
How can I add the new multi-image field to a template page in Webflow's Collection (Profiles)? I cannot find the field option to link in the grid settings.
Any articles or posts on custom variable font integration in Webflow projects?
What is the proper way to size and scale the background image and centered icon in the hero section of a Webflow site? Specifically, how can I ensure that the images remain proportionate and do not become distorted when the window size changes?
What is causing my CSS Grid elements to display incorrectly in Safari and how can I fix it for both Safari on desktop and Safari on iPad?
How can I track the number of people who click the "Book A Free Consultation" button on my Webflow site and are redirected to a separate website for scheduling appointments?
How can I implement chart.js into Webflow using an html embed element or a div?
How can I fix the issue with border radius not displaying properly on iOS when applied to a parent div instead of the image itself in Webflow?
What is the best script I can use in Webflow for a pop-up to allow visitors to accept cookies?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?