> ## Documentation Index
> Fetch the complete documentation index at: https://www.tella.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Tella videos in Framer

<iframe src="https://www.tella.tv/video/clorkuyg800kl0il8fjkh4aa6/embed?b=0&title=0&a=1&loop=0&t=0&muted=0&wt=0" width="100%" style={{ aspectRatio: "16/9", border: "none", borderRadius: "8px" }} allow="autoplay; fullscreen" />

If you have a website in **Framer**, there are a couple of ways to embed video from **Tella**.

For example, you can embed it inline, which means the Tella video loads directly on your webpage.

To do that, you need the **Insert** and **Embed** components.

First, click **Insert**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/1-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=611a8c82a659f99a2d172f36b70fced4" alt="1 2.png" width="2400" height="1350" data-path="help/images/sharing/1-2.png" />

Then **Utility.**

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/2-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=0a7fd53ac613bf47c9324b6b3ca5d416" alt="2 2.png" width="2400" height="1350" data-path="help/images/sharing/2-2.png" />

And go to **Embed**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/3-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=f8b461c7a4fca758e8ed7f5683509098" alt="3 2.png" width="2400" height="1350" data-path="help/images/sharing/3-2.png" />

Drag the **Embed** icon to the center and you will see a little placeholder.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/4-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=f682628262113f6df67d4857d5f3997f" alt="4 2.png" width="2400" height="1350" data-path="help/images/sharing/4-2.png" />

Select the placeholder and on the right side, you have the **Embed Options**.

You have two options: **URL** and **HTML**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/5-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=0c02ddccc90ca13ff14a507b5f8945bb" alt="5 2.png" width="2400" height="1350" data-path="help/images/sharing/5-2.png" />

## URL option

For the URL option, head to Tella and select a video that you want to embed.

Copy the link from the address bar.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/6.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=a2bd0f9a389131da2494c7b1f490f3b4" alt="6.png" width="2400" height="1350" data-path="help/images/sharing/6.png" />

Switch back to Framer and paste it into the **URL** spot.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/7-2.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=c36cedb98ed1ad9284d23d4e3a79de90" alt="7 2.png" width="2400" height="1350" data-path="help/images/sharing/7-2.png" />

After pasting, replace the word "**view**" with "**embed**".

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/8.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=a42694849f5291ad2b2b0b3b52393e18" alt="8.png" width="2400" height="1350" data-path="help/images/sharing/8.png" />

And now you can see that the video is showing up.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/9.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=2a973865a065da9141a76254ee4cef0a" alt="9.png" width="2400" height="1350" data-path="help/images/sharing/9.png" />

You can also adjust the size of the embedded component to your liking.

## HTML Option

If you want to modify the videos you want to embed, like removing the **Avatar Name** and **Record your own** button, all you need to do is to use the HTML option.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/10.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=667b86680b62af5457d104be3fb7e84b" alt="10.png" width="2400" height="1350" data-path="help/images/sharing/10.png" />

Go back to Tella and click the **share icon** to open the **Embed settings**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/11.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=ac60669258ae281ac4dbe6a19552c888" alt="11.png" width="2400" height="1350" data-path="help/images/sharing/11.png" />

Here you can see options that you can toggle on and off when you use the embed code.

When you just grab the URL, these things don't apply but when you get the full iframe, you can set all these properties.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/12.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=37270dc42cf69a09d700e00e80acda3a" alt="12.png" width="2400" height="1350" data-path="help/images/sharing/12.png" />

Once you've toggled the desired properties, preview the **iframe** using the **eye icon** to see all the details, then **copy the embed code.**

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/13.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=d3f729107918c11cd7e3948f649017d1" alt="13.png" width="2400" height="1350" data-path="help/images/sharing/13.png" />

Go back to **Framer** and paste the embed code in the **HTML spot**. You'll see your video with the changes you made.

## Overlay feature

Sometimes, you want more control over the video and how it looks and works on your webpage. However, sometimes, it's just not possible to directly embed an iframe in the part of the page you want to have a video.

That's where Framer's **overlay feature** can help.

In this example, the play button has an animated hover state that viewers can click.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/14.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=9e8d83f4d83dad21785950f382b20a30" alt="14.png" width="2400" height="1350" data-path="help/images/sharing/14.png" />

And once clicked, the video auto-plays in an overlay.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/15.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=0e5fb49d18944433743d8dc18bbc2adf" alt="15.png" width="2400" height="1350" data-path="help/images/sharing/15.png" />

Overlays separate the playback experience from the preview, which can grab attention.

You can also compress the preview file for faster load times, since it doesn't need to load a full iframe.

When you have your video that is not an embedded component, you can add it on the **Insert menu**, **media,** and then **video**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/16.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=eb7f098a21f43587a17c11c96efb9064" alt="16.png" width="2400" height="1350" data-path="help/images/sharing/16.png" />

Once added, you can adjust the properties to create a polished preview effect.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/17.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=dee6e839dc556d02cf3bd2a9806b49ba" alt="17.png" width="2400" height="1350" data-path="help/images/sharing/17.png" />

You can set it to autoplay, loop, mute, or hide the controls depending on the output that you want.

To add the overlay, click Overlay and select the Fixed option.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/18.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=2a9b08c23585bba0f50f6750537d9b6c" alt="18.png" width="2400" height="1350" data-path="help/images/sharing/18.png" />

It will add an overlay behind the video and the menu.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/19.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=f18df9aed1a0719e8c3eca3e4d0dbcef" alt="19.png" width="2400" height="1350" data-path="help/images/sharing/19.png" />

Next, change the **Z index** value to **9**, enough to get a black overlay over the top.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/20.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=49e49713577183c9f91e5a8a610f89da" alt="20.png" width="2400" height="1350" data-path="help/images/sharing/20.png" />

After that, you can still play with the properties if you prefer.

The next thing you're going to do is to get the video on the overlay to repeat the process of embedding HTML.

Copy the embed code and paste it to the **HTML spot** on **Framer**.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/21.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=502fc8fa7f2f84242c2e53b9b38f0b18" alt="21.png" width="2400" height="1350" data-path="help/images/sharing/21.png" />

Once pasted, you just need to fix the size according to your liking or play around with its position and you can hit done.

You can then click the preview to see the process that you did.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/22.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=a4153fac6cf64026ca835ecbf2466dd8" alt="22.png" width="2400" height="1350" data-path="help/images/sharing/22.png" />

Hover, open it and it autoplays.

<img src="https://mintcdn.com/tella/Isiu-Cd8qYEzKYhq/help/images/sharing/23.png?fit=max&auto=format&n=Isiu-Cd8qYEzKYhq&q=85&s=9b1fb89d92201d07df4443f7e91d5076" alt="23.png" width="2400" height="1350" data-path="help/images/sharing/23.png" />

Those are the main ways to embed Tella videos in Framer.
