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 issues persist after following these steps, create a support ticket in the Framer Community.