Skip to main content
Embed a Tella video on a Framer site with Framer’s Embed component: paste the video’s URL (with view changed to embed) into the URL option, or paste the iframe code from Share → Embed in Tella into the HTML option.
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. 1 2.png Then Utility. 2 2.png And go to Embed. 3 2.png Drag the Embed icon to the center and you will see a little placeholder. 4 2.png Select the placeholder and on the right side, you have the Embed Options. You have two options: URL and HTML. 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. 6.png Switch back to Framer and paste it into the URL spot. 7 2.png After pasting, replace the word “view” with “embed”. 8.png And now you can see that the video is showing up. 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. 10.png Go back to Tella, click Share, and open the Embed tab. 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. 12.png Once you’ve toggled the desired properties, check the live Preview next to the settings, then click Copy code. 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.

​
Play the video in an overlay

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. 14.png And once clicked, the video auto-plays in an overlay. 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. 16.png Once added, you can adjust the properties to create a polished preview effect. 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. 18.png It will add an overlay behind the video and the menu. 19.png Next, change the Z index value to 9, enough to get a black overlay over the top. 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. 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. 22.png Hover, open it and it autoplays. 23.png Those are the main ways to embed Tella videos in Framer.
Last modified on November 3, 2026