Skip to main content
If you have a website in Framer, there are a couple of ways to embed video from Tella. For example, we can embed it inline which means the Tella video will just load directly to your webpage. To do that, we need to 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. We 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 like 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 and click the share icon to open the Embed settings. 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 done with toggling the desired properties, we can preview the iframe using the eye icon to see all the details and copy the embed code. 13.png Now we can go back into Framer and paste the embed code on the HTML spot and you’ll see your video with the edits 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. Here in the example, you can see that there is a hover state which was animated in the play button where viewers can click on. 14.png And once clicked, the video auto-plays in an overlay. 15.png The thing with overlays is it lets you separate the playback and the watching experience of the video from the preview which can catch the people’s attention. It can also optimize your website even further since you have control over the preview so you can compress the video file and make it smaller to make it load faster than loading a full iframe into your website. 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 will have properties that you can play around with which means you can create a really nice effect with the preview. 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 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 And those are some ways to embed Tella videos in Framer.