How to embed a webm/video into a Webflow Blog

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