How to embed a webm/video into a Webflow Blog

How to embed a webm or video into a Webflow blog/CMS entry, you will need to use the "Code Editor" component.
Tom Bruining
August 29, 2024

We wanted to do this for our own Webflow blogs, like this one on how to create a product demo gif. You'll find a step by step tutorial, a click-through guide and sample code in this article.

Step by Step

To embed a webm or video into a Webflow blog/CMS entry, you will need to use the "Code Editor" component.

  1. Find the position in the CMS entry you'd like to have your webm or video file embedded.
  2. Click the "+" button and then select the code editor.
  3. Paste the sample code provided below into the code editor.
  4. Upload your video/gif to somewhere on the internet. You can't use Webflow for this unfortunately!
  5. Modify the src value of the video element.
  6. Modify the caption details to explain the video.
  7. Save & publish your entry.

We have set this up to auto-play the video, you can disable that and looping by adjusting the settings in the sample code block.

Interactive walkthrough of the process

Sample code

1<figure style="max-width:1600pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image">  
2	<video muted playsinline loop autoplay preload="none" width="100%" style="border-radius: 12px; border: 1px solid #eaecf0">      
3    	<source src="[Add the link to your webm file here!]" type="video/webm">  
4    </video>
5    <figcaption>[Update the caption for your looping video here!]</figcaption>
6</figure>

Some of these attributes explained:

preload="none" - This is very important for SEO! Otherwise the video will be downloaded and may impact your speed results.

autoplay - this tells the browser to play the video automatically, note that the values below are necessary for this to happen.

muted - this is important, as otherwise Safari will NOT play your video in line.

playsinline - this tells iOS Safari specifically to play the video in line. (Not go full-screen)

loop - This tells the browser to loop repeatedly.

Example using the demo above

 
The interactive demo above, exported as a video and embedded here.
Capture your first product demo today
Free trial, no credit card required
Edit anything in your UI with HTML demos
Hands on onboarding and support
About the Author
Tom Bruining
Founder, BSc of Computer Science & BComm

Tom Bruining is the co-founder of HowdyGo. In the past he was Head of Growth & Marketing at a B2B SaaS and Head of Data & Business Intelligence at HelloFresh, UK.

In this article
Double your conversion rate with an interactive demo
Get started for free
Capture your first product demo today
Free trial, no credit card required
Edit anything in your UI with HTML demos
Hands on onboarding and support