Embedding a Loom video in your site

Embed a Loom video into your project using the embed component.

To embed a Loom video in your Framer project, follow these steps:

How to add Loom video to your website

Add an embed component

Open the Insert menu, search for “embed,” and drag the component onto your canvas.

The left panel shows six element options under the 'Elements' category: Calendly, Intercom, Typeform, Hubspot, Tagembed, and Embed, each represented by a distinct icon.

Get the embed code from Loom

In your Loom account, navigate to the video's share page and click “Share” above the video.
Select “Embed” and ensure the privacy settings allow “Anyone with the link” to view the video.
Copy the embed code provided by Loom. The default code looks like this:

<div style="position: relative; padding-bottom: 56.074766355140184%; height: 0;"><iframe src="https://www.loom.com/embed/e5b8c04bca094dd8a5507925ab887002?hideEmbedTopBar=true&t=20s" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Modify the embed code

Remove the style attribute from the <div> tag so it looks like this:

<div><iframe src="https://www.loom.com/embed/e5b8c04bca094dd8a5507925ab887002?hideEmbedTopBar=true&t=20s" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Paste the code into the embed component

Select the embed component in your Framer project and switch to the HTML tab.
Paste the modified embed code into the tab.

The right-hand panel contains a large text box is available for inserting custom HTML code.

For additional parameter settings, refer to this Loom support article.

If you're still experiencing issues, please reach out to us through our contact page for further help.