How to Embed a TikTok Video on a Website

Embedding a TikTok video directly onto your website is one of the smartest ways to boost engagement, keep visitors on your page longer, and show off your brand’s personality. If you’ve been wondering how to get that dynamic, vertical video content from your For You Page onto your own site, you’re in the right place. This guide walks you through the entire process, from grabbing the embed code to customizing how the video looks on your page.

Why You Should Embed TikTok Videos on Your Website

Before getting into the step-by-step, let's quickly cover why this is such a good idea. It’s more than just making your site look cool. Embedding TikToks is a strategic move that comes with some solid marketing benefits.

• Increased Time on Page: When a visitor stops to watch an entertaining 30-second video on your blog post or landing page, they're spending 30 more seconds on your site. This "dwell time" is a positive signal to search engines like Google, indicating that your page provides value. More time on page can contribute to better search rankings.
• Enhanced User Engagement: Let’s face it, a wall of text can be intimidating. A well-placed TikTok video breaks up long articles, adds visual interest, and provides a bite-sized piece of engaging content. It instantly makes your content more dynamic and memorable.
• Powerful Social Proof: Are your customers posting amazing videos using your products? Embedding those user-generated content (UGC) videos on your product pages is social proof gold. It shows potential buyers that real people love what you sell, building trust much more effectively than a standard testimonial.
• Cross-Promote Your TikTok Channel: Every embedded TikTok video includes a link back to your profile. This gives your website visitors an easy, one-click way to discover your TikTok account and hit that "Follow" button, growing your audience on both platforms simultaneously.
• Freshen Up Your Content: Websites can sometimes feel static. By integrating content from a fast-moving platform like TikTok, you infuse your site with fresh, timely, and relevant content that reflects what’s happening in your community right now.

How to Embed a TikTok Video: The Official Method (Step-by-Step)

The simplest and most reliable way to add a TikTok video to your site is by using the official embed feature provided by TikTok itself. It’s a straightforward process that generates a small piece of HTML code you can paste anywhere on your site. Here’s how it works.

Step 1: Find the TikTok Video You Want to Embed

First, open TikTok on your desktop browser. This method is much easier on a computer than on your phone. Navigate to the video you want to use. This can be one of your own videos or a video from another creator (as long as they have embedding enabled).

Step 2: Get the Embed Code

Once you’re on the video’s page, look for the sharing options. You'll see icons for sharing to various platforms. Click the <, >, Embed button. It’s usually located near the "Send to friends" or "Share to" options.

Note: If you don't see the "Embed" button, it means the creator has disabled embedding for their videos in their privacy settings. We'll cover what to do in that situation later on.

Step 3: Copy the HTML Code

After clicking the "Embed" button, a pop-up window will appear containing a snippet of HTML code. It will look something like this:

<,blockquote class="tiktok-embed" cite="https://www.tiktok.com/@creator/video/1234567890123456789" data-video-id="1234567890123456789" style="max-width: 605px,min-width: 325px," >, <,section>, <,a target="_blank" title="@creator" href="https://www.tiktok.com/@creator?refer=embed">,@creator<,/a>, <,p>,This is the video caption...<,/p>, <,a target="_blank" title="♬ original sound - Audio Creator" href="https://www.tiktok.com/music/original-sound-7890123456789012345?refer=embed">,♬ original sound - Audio Creator<,/a>, <,/section>, <,/blockquote>, <,script async src="https://www.tiktok.com/embed.js">,<,/script>,


You don't need to understand what any of this code means. Just click the "Copy code" button. TikTok automatically copies the entire block of code to your clipboard.

Step 4: Paste the Code into Your Website

Now, head over to your website’s editor. You need to paste the code you just copied into an area that accepts HTML. The process varies slightly depending on your website platform.

For WordPress:

1. Open the post or page where you want to add the video.
2. Click the "+" icon to add a new block.
3. Search for the "Custom HTML" block and select it.
4. Paste the TikTok embed code directly into this block.
5. Click "Preview" to see how it looks, then save or publish your page. The TikTok video player should appear perfectly.

For Shopify:

1. Go to the product page, blog post, or page where you want the video.
2. In the content editor toolbar, find the button that looks like <, >,. It usually says "Show HTML" when you hover over it.
3. Click this button to switch from the visual editor to the code editor.
4. Find the spot where you want the video and paste the TikTok embed code.
5. Click the <, >, button again to switch back to the visual editor and save your changes.

For Squarespace:

1. Edit the page or post where you want the video.
2. Click an insert point (the bubble that appears when you hover over the content area) and select the "Code" block from the menu.
3. Paste the TikTok embed code into the text field in the pop-up window.
4. Make sure "HTML" is selected as the display mode.
5. Click "Apply" and save your page.

Customizing Your Embedded TikTok Video

The standard TikTok embed works great out of the box, but you might want to tweak its appearance to better fit your site's layout. Because it’s just HTML, you have some control over how it looks.

Adjusting the Size

The default embed code from TikTok comes with a pre-set width. You'll see this in the code string: style="max-width: 605px,min-width: 325px,". You can change these values directly in the HTML. For example, if you wanted the video to be narrower to fit in a sidebar, you could change it to:

style="max-width: 350px,min-width: 300px,"

Just remember that TikTok videos are vertical (a 9:16 aspect ratio), so making the player too wide might result in empty space on the sides or cause the player to look clunky.

Making the Embed Responsive

For more advanced users, you can use a bit of CSS to make the TikTok embed fully responsive. This means it will automatically resize to fit the screen of any device, whether it's a large desktop monitor or a small smartphone. You'd first remove the inline style from the blockquote, and then add a CSS class to it. Then, in your website’s custom CSS file or settings, you could add something like this:

.responsive-tiktok {
max-width: 400px, /* Or whatever max width you prefer */
width: 100%,
margin: 0 auto,
}


This is a great solution to make sure the embedded video looks good everywhere without any manual adjustments.

What to Do if the TikTok Embed Button Is Missing

Sometimes you’ll find the perfect video, but the <, >, Embed button is nowhere to be found. This happens when the creator has disabled video downloads and embeds in their account’s privacy settings. It’s a deliberate choice on their part.

When this happens, you have a couple of responsible options:

• Respect the Creator's Choice: The easiest and most ethical path is to find another video. If a creator has turned off embeds, there’s usually a reason. Respect their decision and look for content from creators who have enabled it.
• Reach Out and Ask: If the video is critical for your content (for example, it's a glowing review of your product), consider reaching out to the creator. Send them a polite message on TikTok asking if they'd be willing to enable embedding for that specific video so you can feature them on your website. Many creators will be happy to do so!

One thing to absolutely avoid is using an unofficial, third-party "TikTok downloader" or embed generator. These tools often violate TikTok’s terms of service and can infringe on the creator’s copyright. Sticking with the official embed method protects you, your website, and the original creator.

Using Plugins for WordPress or Other Platforms

If you plan to embed TikTok videos regularly, or if you want to display an entire feed of your latest videos, a dedicated plugin might be a better solution. For website builders like WordPress, tools like Smash Balloon, Spotlight, or EmbedSocial offer powerful widgets that connect to your TikTok account via API.

Benefits of using a plugin:

• Automatic Updates: Display a gallery of your latest TikToks that updates automatically every time you post.
• More Customization: Most plugins offer extensive design options to change the layout, colors, and information displayed with the videos.
• Ease of Use: You typically only need to authenticate your account once, and then you can add a TikTok feed anywhere with a simple shortcode or block, no more copying-and-pasting individual embed codes.

The trade-off is that these plugins can add extra weight to your site, and the best features are often part of a paid subscription. For embedding a single video, the official method is usually more than enough.

Final Thoughts

As you can see, embedding a TikTok video onto your website is a quick and effective way to make your content more compelling, hold your audience's attention, and bridge the gap between your social media presence and your digital home base. It’s a small change that can deliver significant results in both user experience and organic growth.

Bringing your social content onto your site makes your brand feel more connected, but managing it all can still feel like a scramble. We know keeping a consistent calendar for TikToks, alongside Reels and Shorts, is a huge challenge. That’s why we built Postbase with a visual-first approach, especially for video. With our calendar, you can plan, schedule, and see your entire short-form video strategy in one clean view, making sure you never miss a beat on any platform.