Why is my HTML5 video not showing up when I try to embed it using the Webflow embed HTML widget, even though the video plays fine when I paste the URL into a browser? I have followed the coding guides correctly.
TL;DR
- Ensure the video host allows CORS and public access; try Vimeo Pro, AWS S3, or Cloudflare Stream.
- Verify the file is MP4 (H.264), WebM, or Ogg and provide multiple formats in
<source>tags. - Use a valid
<video>tag with controls, autoplay, muted, loop, and playsinline attributes. - Webflow does not run JavaScript in Designer; test in Preview Mode or a published site.
- Try a direct MP4 link from a reliable CDN to identify potential hosting issues.
If your HTML5 video is not displaying in Webflow's Embed HTML widget but works when accessed directly in a browser, there are a few potential causes. Follow these steps to troubleshoot:
1. Check Video Hosting & Permissions
- Ensure the video is hosted on a server that allows CORS (Cross-Origin Resource Sharing).
- If using a third-party service (e.g., Google Drive, Dropbox), verify that direct file access is publicly available.
- Try hosting the video on a dedicated platform like Vimeo Pro, AWS S3, or Cloudflare Stream.
2. Verify the Video Format
- Webflow supports MP4, WebM, and Ogg formats for HTML5 video elements.
- Check if your file is properly encoded (H.264 for MP4 is widely supported).
- Use an alternate video format in your
<source>elements: - MP4 example:
<source src="your-video.mp4" type="video/mp4"> - WebM example:
<source src="your-video.webm" type="video/webm">
3. Correct the Embed Code
Ensure you are using a valid HTML5 <video> tag. Example:
<video controls autoplay muted loop playsinline> <source src="your-video.mp4" type="video/mp4"> Your browser does not support the video tag.</video>controlsadds playback options.autoplay muted loop playsinlinehelps ensure videos start as expected on mobile.
4. Check Webflow's Code Embed Limitations
- Webflow does not execute JavaScript in the Designer. If you're using scripts, test them in Preview Mode or Publish the site to check functionality.
- Embedded videos won't display if Webflow flags the embed as unsafe or due to browser restrictions on autoplay + audio.
5. Test with a Directly Hosted MP4
- Try a direct MP4 link from a reliable CDN, like this:
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">- If this plays, the issue is likely your video’s server settings or file path.
Summary
The most common issues are CORS restrictions, incorrect file formats, or Webflow’s embed limitations. Try hosting the video somewhere with public access, ensure it’s an MP4 (H.264) format, and use valid HTML5 <video> markup inside the Embed HTML widget. Always test the page in Preview Mode or a published version to see the final result.