TikTok Embed

Here’s a TikTok video, pulled in with a custom tiktok shortcode:

(Everything below reflects how TikTok’s embed behaves as of August 2026. Their interface may change at any time.)

Why a custom shortcode

Hugo has built-in shortcodes for YouTube, Vimeo, Twitter/X, and Instagram. Not TikTok, though, so I wrote one.

layouts/shortcodes/tiktok.html takes a user and an id and spits out TikTok’s own embed markup — the same blockquote.tiktok-embed + embed.js combo you’d get from their “Share → Embed” button:

{{- $user := .Get "user" -}}
{{- $id := .Get "id" -}}
<div class="tiktok-embed-wrapper">
  <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@{{ $user }}/video/{{ $id }}" data-video-id="{{ $id }}" style="max-width: 605px;min-width: 325px;">
    <section></section>
  </blockquote>
</div>
<script async src="https://www.tiktok.com/embed.js"></script>

Used like this: {{< tiktok user="claude" id="7672781704494386463" >}}

Centering it

Left alone, the blockquote just sits near the left edge with default browser margins. On a dark page that looks like a broken white bar, not a video. Wrapping it in tiktok-embed-wrapper and adding one rule in assets/css/extended/overrides.css fixes that:

.tiktok-embed-wrapper{
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

What I can’t fix

The actual video sits inside a cross-origin iframe from tiktok.com, so no amount of CSS on my end reaches it. Two consequences of that:

• There’s no dark-mode option. The player is always light, same as embedding a YouTube or Spotify player.
• It suggests unrelated videos once playback ends. That’s not a bug, it’s how TikTok built the embed.