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.