How do we fix black squares on site that are supposed to be vimeo links?

Hi @celebritydance ,

I see you’re facing an issue with Vimeo videos showing up as black squares on mobile devices while they work fine on desktop. This can be frustrating, but I have a few suggestions that might help resolve the issue:

1. Check Vimeo Embed Settings:
   • Make sure that your Vimeo videos are set to public and that there are no restrictions that could prevent them from being viewed on mobile devices. Double-check the embed settings on Vimeo to ensure they’re optimized for mobile playback.
2. Use Responsive Embed Code:
   • Ensure that your Vimeo videos are embedded using a responsive method. If you’re using the WordPress block editor, try using the dedicated Vimeo block rather than pasting the embed code directly into an HTML block. This ensures that the video adapts properly to different screen sizes.
3. JavaScript Conflicts:
   • There might be JavaScript conflicts on your page causing the video to not load correctly on mobile. Use the browser’s developer tools to check for any console errors when accessing the page on mobile devices. If you’re using async or defer loading scripts, try disabling them temporarily.
4. Clear Cache and Minification:
   • If you’re using caching or minification plugins (like WP Super Cache or W3 Total Cache), try clearing the cache or temporarily disabling minification. Sometimes, these can interfere with how videos are loaded on different devices.
5. Cross-Device Testing:
   • Test the site on different mobile devices and networks (Wi-Fi and mobile data) to see if the issue persists across all platforms. This can help determine if the problem is device-specific.
6. Mobile Theme or Plugins:
   • If you’re using any mobile-specific themes or plugins, try disabling them to see if they’re causing the issue. Mobile plugins can sometimes interfere with how videos are rendered.
7. SSL and Mixed Content:
   • Ensure that your site is fully SSL-secured (HTTPS) and there are no mixed content issues, as these can sometimes prevent videos from loading properly on mobile devices.

If these steps don’t resolve the issue, it might be helpful to share more details about how the videos are embedded or if you’re using any specific plugins that could be affecting video playback. Good luck, and I hope this helps!

@siva_selva To show our videos on the website we are using the Video Player from our admin page and inserting a video link. The problem is occurring with Vimeo and Youtube links on mobile devices. All links are public and appear to play fine on all desktop devices.

@celebritydance If Vimeo and YouTube videos aren’t playing on mobile devices, ensure they’re set to public and allow embedding. Use https links to avoid security blocks by mobile browsers. Make sure your video embeds are responsive by using WordPress’s native embed feature or custom CSS to adjust to mobile screen sizes. Update all plugins and themes to avoid compatibility issues and check for JavaScript errors using mobile browser developer tools.

Thank you for these tips. We have confirmed that our links are set to public, using https links and also ensured that the embedding is allowed from the origin site. Is there anything else we can do to make these videos visible on mobile devices? This is our current state:

Is there anything else we can do to make these videos visible? We have updated our site as well. @siva_selva