What is Loom?

Loom is a video messaging tool that helps convey messages through instantly shareable videos.
With Loom, you can simultaneously record your camera, microphone, and desktop screen. The recorded videos can be instantly shared thanks to Loom's patented technology.

How to Embed a Loom Video

1. Add the Embed Component

First, open the Insert menu in the Framer editor, find embed, and drag it onto your canvas.

2. Get the Embed Code from Loom

1. On the video's share page, click the Share button at the top of the video.

2. Select the Embed option and make sure the video's privacy setting is “Anyone with the link”.

3. Copy the embed code provided by Loom exactly as it is.

Basic Code Example:

<div style="position: relative; padding-bottom: 56.074766355140184%; height: 0;">
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

3. Remove the Style Attribute from the div Tag

To avoid conflict with Framer's embed component, remove only the style attribute from the above code in the <div> tag.

This should look like:

<div>
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

4. Paste Code into the Framer Embed Component

1. Return to Framer and select the Embed component placed on your canvas.

2. Switch to the HTML tab in the right panel and paste the code into the input field that appears.

3. Now, when you preview or publish the site, the Loom video will naturally display within the page.

5. Configure Additional Parameters

If you need further detailed settings such as video playback options or display methods, refer to the Loom support documents.
If you still encounter issues, please contact us through the contact page.

Frequently Asked Questions (FAQ)

Q. Is additional configuration needed to make the Embed component responsive?

• No. Framer's Embed component is automatically responsive to the container size, so there's no need to add extra CSS.

Q. Do I need to manually adjust the size if the video appears too large?

• Yes. The Embed component follows the size of the parent Frame, so adjust the Frame or Auto Layout settings to your desired size.

Q. Can I change the video thumbnail (pre-play screen) from within Framer?

• No. Thumbnails can only be changed on the Loom platform, and cannot be controlled within Framer.

This content is an adaptation and translation of the Framer official blog’s 'Embedding a Loom video in your site'.