So you’re trying to add TikTok Videos to your Framer site. If you’re trying to create a nice video experience for your site, directly embedding TikTok Videos might not be a great idea. They can slow down your site, take people off your site back to instagram and look off brand.

A better way to do this is to use a platform like Clipara to embed your short form video.

There’s no coding required, so anyone can use this method. In this guide, we’ll show you the quick steps to add your video gallery, grid, or other video embeds to your Framer website.

What’s Important for Embedding TikTok Videos in Framer?

1. Page Speed - When adding TikTok Videos to your website, loading speed is a top priority. Clipara takes care of this, ensuring your site doesn’t get bogged down by heavy MP4s or YouTube embeds. It loads video assets only when users interact with them, keeping your website fast and reducing bounce rates.‍
2. Ease of Installation - Getting your videos up and running shouldn’t feel like solving a puzzle. Choose a video platform that provides simple embed codes. Clipara’s simple embed functionality makes it easy to drop in external video galleries or grids with a quick copy-paste—no advanced technical skills required
3. ‍User Experience - A great video experience keeps visitors engaged. Ensure videos don’t autoplay simultaneously, and make it easy for users to navigate between videos. Intuitive controls for pausing, sound, and navigation will improve overall usability.‍
4. On-Brand Experience - Your video gallery should feel like a natural part of your website’s design. Clipara helps you customize the style to match your branding. This ensures your site feels cohesive, unlike if you embed TikTok Videos directly, which can look spammy and unprofessional.

Why Add TikTok Videos to Your Framer Site?

Adding videos can significantly enhance your site’s appeal and modernize the experience for your users. Everybody loves short form video these days, and it’s most people’s preferred content style. That’s why TikTok Videos are so popular!

The Simplest Way to Add TikTok Videos to Your Framer Site with Clipara

Clipara is a video platform designed for easy creation and embedding of modern video experiences—no technical expertise needed.

Below, we’ll guide you through creating a stunning video gallery or grid with Clipara and embedding it seamlessly in Framer.

‍

Step 1

Upload your videos to Clipara. You can upload your TikTok Videos directly or you can upload other short form content directly from your computer.

‍

‍

Step 2

Create a campaign, and choose your playing experience. Either Inline or Full Screen. Inline will play the videos directly in the page. Full screen pops open a full screen swipeable experience just like TikTok Videos or TikTok. You will also choose the base widget layout that you would like to use. In this instance you will choose Carousel.

Step 3

Select the videos you want to use in the carousel and choose the order of them.

‍

‍

Step 4

Customise your campaign. There's a lot of possibilities here. As well as changing layouts and colours, you can also customise thumbnails, add titles to videos and more.

‍

Step 5

It's now time to install your campaign on Webflow. Click save, and copy the install snippet that pops up in the Clipara dashboard.

‍

Embed in Framer

Embed in Framer using the Code embed functionality.

1. Click to add an element and choose Embed
2. In the right panel, toggle the Embed to HTML rather than URL
3. Paste in the Clipara snippet
4. Refresh the page. The embed will load very large at first, so refresh the page to resize it to the canvas.
5. We recommend setting the height to auto and width to relative width 100% width to make sure your embed is responsive across screen sizes

‍

‍

And that's it! Your campaign is now live.

‍