DEV Community

Cover image for Adding TikTok Embed Support To Wagtail
Codista
Codista

Posted on • Originally published at codista.com

1

Adding TikTok Embed Support To Wagtail

TikTok videos are a lot of fun to watch. People get super creative with the limited amount of time they have. No wonder some of our clients requested being able to embed TikTok videos into their CMS pages, mainly blog articles.

The Wagtail docs do cover adding custom embeds to your configuration, but at first glance it's not completely straight forward. So we hope to clear things up a bit, by example, in a couple of minutes.

Adding support for TikTok oEmbed

First, a big and loud "thank you!" to TikTok for supporting the oEmbed standard. There are platforms that don't and it makes embedding less trivial, but let's not get into that.

First, fire up your Django settings (settings.py) and then add the following:

# CUSTOM OEMBED PROVIDERS
tiktok_provider = {
    "endpoint": "https://www.tiktok.com/oembed",
    "urls": [
        # 'https://www.tiktok.com/@memmesson/video/6797323084085890309'
        r"^http(?:s)?://(?:www\.)?tiktok\.com/@\w+/video/\d+$",
    ],
}

This specifies the provider itself. It also tells Wagtail which URLs are considered valid, via the regular expression pattern above.

Now, we need to add that provider to the list of valid providers:

WAGTAILEMBEDS_FINDERS = [
    # Register tiktok
    {"class": "wagtail.embeds.finders.oembed", "providers": [tiktok_provider],},
    # Handles all other oEmbed providers the default way
    {"class": "wagtail.embeds.finders.oembed",},
]

That's it! If you now fire up any CMS page that supports embeds, you can simply paste the direct TikTok video link and the embed will load right away.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more