There are three ways to put a TikTok on a page, and picking the wrong one is why embeds break. Copy the blockquote TikTok gives you and it works everywhere but loads a lot of script. Call the oEmbed endpoint and you can build embeds dynamically from a URL. Render a thumbnail first and load the player on click, and you keep the page fast and stop TikTok tracking every visitor who never presses play.
Quick answer: On desktop, open the video on tiktok.com, click Share, then Embed, and paste the blockquote and script tag into your page. For dynamic pages, request https://www.tiktok.com/oembed?url=VIDEO_URL and use the html field it returns. Both need https://www.tiktok.com/embed.js to run, so make sure your content security policy allows it.
All three approaches use the same underlying markup, so it helps to understand that first. Everything below follows TikTok’s own embed documentation.
Method 1: the copy and paste embed
This is the official route and the one to use for a handful of videos in an article or a landing page.
Open the video on tiktok.com in a desktop browser. The mobile app does not offer the embed option, which trips people up constantly. Click Share, choose Embed, then copy the code. You get something like this.
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@scout2015/video/6718335390845095173" data-video-id="6718335390845095173" data-embed-from="oembed" style="max-width: 605px;min-width: 325px;"> <section></section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
The blockquote is a placeholder. The script finds every element with the tiktok-embed class and swaps in an iframe. You only need the script tag once per page no matter how many videos you embed. If you are also measuring conversions from these pages, see our guide to setting up the TikTok Pixel.
Warning: Many content management systems strip <script> tags and unknown attributes from post content. WordPress does this by default for non administrator roles. If your embed renders as an empty quote block, sanitisation is the cause, not TikTok.
Method 2: oEmbed, for anything dynamic
If your page builds itself from a list of video URLs, you do not want to store hand copied markup. TikTok implements the oEmbed standard, so one request turns a URL into ready made embed code plus the metadata you need for a card.
curl -s "https://www.tiktok.com/oembed?url=https://www.tiktok.com/@scout2015/video/6718335390845095173"
No API key, no OAuth, no app review. The response is JSON with the fields the oEmbed specification defines.
| Field | What you use it for |
|---|---|
html | The blockquote markup, ready to inject |
thumbnail_url | The poster image for a click to load facade |
thumbnail_width, thumbnail_height | Reserving space so the layout does not shift |
title | Caption text and image alt attributes |
author_name, author_url | Attribution, which you should always show |
width, height | Aspect ratio hints for your container |
Cache the response. A video’s metadata rarely changes, and hitting the endpoint on every page view is both slow and rude. A day of caching is reasonable, with a shorter time to live if you display view counts elsewhere.
Note: oEmbed is a public convenience endpoint, not part of the authenticated TikTok API. If you need video statistics, comments or the ability to publish, that is the Display API and the Content Posting API, which require an approved developer app. Our overview of the TikTok for Developers documentation explains which product covers what.
Method 3: click to load, for speed and privacy
The official embed pulls in a substantial amount of JavaScript and sets cookies before a visitor has expressed any interest in the video. On a page with several TikToks that is a real cost, and in some jurisdictions loading a third party player before consent is a compliance problem.
The fix is a facade. Render the thumbnail from oEmbed, and only insert the real embed when someone clicks.
// container holds data-video-id and data-cite from your oEmbed cache
document.querySelectorAll('.tt-facade').forEach(function (el) {
el.addEventListener('click', function once() {
var q = document.createElement('blockquote');
q.className = 'tiktok-embed';
q.setAttribute('cite', el.dataset.cite);
q.setAttribute('data-video-id', el.dataset.videoId);
q.style.maxWidth = '605px';
q.style.minWidth = '325px';
q.appendChild(document.createElement('section'));
el.replaceWith(q);
if (!document.getElementById('tt-embed-js')) {
var s = document.createElement('script');
s.id = 'tt-embed-js';
s.async = true;
s.src = 'https://www.tiktok.com/embed.js';
document.body.appendChild(s);
}
}, { once: true });
});Give the facade the same dimensions as the finished player and the page will not jump when the swap happens. That keeps your Cumulative Layout Shift score intact.
Which method to use
| Method | Best for | Cost |
|---|---|---|
| Copy and paste blockquote | Articles, one or two videos, non technical editors | Heaviest, loads on every view |
| oEmbed | Feeds, galleries, user submitted links | One server request, then cache |
| Click to load facade | Performance sensitive pages, consent driven sites | Lightest, needs a little code |
Making it responsive
TikTok ships the embed with max-width: 605px and min-width: 325px inline. Below 325 pixels the player will overflow its parent, which is exactly the width you hit inside a padded card on a small phone. Wrap the embed rather than fighting those values.
.tt-wrap { max-width: 605px; margin: 24px auto; }
.tt-wrap .tiktok-embed { margin: 0 auto; }
@media (max-width: 380px) {
.tt-wrap { margin-left: -12px; margin-right: -12px; }
}Tip: On AMP pages skip all of this and use the amp-tiktok component instead. It takes the same video URL and handles sizing and lazy loading for you, and arbitrary scripts are not allowed in AMP anyway.
Embedding inside a native app
There is no native TikTok player SDK for third party apps. The practical route is a WebView loading a minimal HTML document that contains the blockquote and the embed script. Two things matter: enable JavaScript on the WebView, and set the user agent to a desktop or standard mobile browser string rather than leaving it as your app’s default, because an unexpected agent sometimes gets the fallback player instead of the real one.
Do not screen scrape the video file and play it in your own player. The terms of service do not allow redistributing the media, and the extracted URLs expire quickly anyway.
Troubleshooting
Nothing renders, just an empty box. The script has not run. Check that embed.js is actually loading in the network tab, and that your content security policy allows script-src https://www.tiktok.com and frame-src https://www.tiktok.com.
It works locally and breaks in production. Almost always a sanitiser or a tag manager stripping the script tag, or a consent manager blocking it until a category is accepted.
The video shows a blank or unavailable message. The post has been deleted, set to private or made friends only. Embed availability tracks the app exactly, so there is no workaround.
The player looks different from other sites. Some browsers, particularly a few popular in China, substitute their own player. Nothing on your end causes it and nothing on your end fixes it.
Layout jumps when the video loads. Reserve space in advance using the thumbnail dimensions from oEmbed.
Frequently asked questions
Do I need a TikTok developer account to embed videos?
No. Both the copy and paste embed and the oEmbed endpoint are public and need no key, no app registration and no review. A developer account is only required for the authenticated APIs such as Display, Content Posting and Research.
Can I embed a TikTok video on a blog post?
Yes. Paste the blockquote and the script into the HTML view of your editor. If your platform strips scripts, add the script once in the theme footer and paste only the blockquote into each post.
Does embedding a TikTok count as a view?
Plays in an embedded player are counted by TikTok, though the creator’s in app analytics separate on platform and off platform activity. Attribution shown to visitors is a courtesy you should keep regardless. If you are new to the platform itself, start with our beginner guide to TikTok.
Why can I not find the embed option on my phone?
The share sheet in the mobile app does not include it. Open the same video in a desktop browser on tiktok.com and the Embed option appears under Share.
Will the embed break if the creator changes their username?
No, as long as you keep the numeric video ID. The cite URL contains the handle and can go stale, but data-video-id is what the player resolves, which is another reason to store the ID rather than only the link.
The bottom line
For a couple of videos in an article, take the blockquote from the desktop share menu and move on. For anything that builds pages from data, call oEmbed once, cache the result, and render a thumbnail that swaps in the real player on click. That combination gives you working embeds, a fast page and no third party scripts loading for readers who never wanted to watch. If the goal is reach rather than presentation, our guide to running a TikTok challenge is the next step.
