Webflow sync, pageviews & more.
NEW

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>
  • controls adds playback options.
  • autoplay muted loop playsinline helps 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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make the Webflow navbar component transparent by setting the opacity to 0? I've tried various methods, but it still appears as a light gray color. The same issue occurs with form fields element, where opacity changes don't seem to have any effect. Is this a bug or am I missing something? I've seen similar posts about this, but haven't found a proper solution.
What could be causing the error message when exporting Webflow code to a different hosting provider and how can I fix it?
Can I change the position of an object in Webflow to be relative to a specific element instead of the body?
What could be the reason for some collections not working properly in my online magazine, specifically the "style & beauty" section under the "culture" tab, and the subpages under the "lifestyle" group in Webflow, even though they are set up the same as the functioning collections? Is there a limit to the number of collections allowed on the CMS plan?
What could be causing glitches in the Designer and live site of a specific Webflow project, specifically when using the CMS section, while other projects in the same account are not affected?
Why is it not possible to invite users in Webflow? Is it because the product is still in beta?
Does Webflow integrate with any payment providers to receive cryptocurrencies as well?
How can I change the style of the bullet points to match the introduction text in Webflow?
Is it possible to play a video in Webflow when a user scrolls and the video is in view?
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?
How can I fix the issue with the section link scroll on my Webflow site when using Tablet to Mobile breakpoint where the page scrolls past the intended section? I have already tried changing the image load settings to Eager but it didn't work. Thank you!
Is there an issue with the layout of my website in Safari browsers on iPad and MacBook Air devices?
Can combo classes be applied to CMS collections or is there another solution to applying the card stack effect in Webflow?
Has anyone experienced the issue of Googlebot being blocked by robots.txt in Webflow, even though access has been allowed in the file?
How can I prevent my images from shrinking unexpectedly in Webflow? I've tried adjusting min width, max width, and max height but haven't found a solution yet.
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?