Tiktok block: Some sharing URL from Tiktok app isn't reflected properly on live site

[retnonindya]

Description

When sharing Tiktok URL from the app, it's not recognized by Gutenberg -- rendered the Tiktok URL to turn into Paragraph block and hyperlink instead of the expected embedded content.

Step-by-step reproduction instructions

1. Go to Tiktok app, and find the Tiktok video you want to share.

2. Click on the share icon. You should see a sliding module appeared from the bottom.

3. Click the 'Copy Link' icon to copy the Tiktok video link for embed purpose.
   
   Direct link: https://cldup.com/dwp6ye7lCq.png

4. You should receive the URL/the URL should be copied directly to the clipboard. For this GH report purpose, the link is https://vt.tiktok.com/ZSTD5bW7/

5. Go to WordPress.com editor (post editor) and copy-paste the Tiktok URL on the editor.

Expected behaviour

The Tiktok video will be embedded properly on the editor and on the live site.

Actual behaviour

The URL will turn into regular Paragraph block with the URL as regular hyperlink text.

---

Additional finding:

I found this issue only happened when the Tiktok URL used is the https://vt.tiktok.com/... format. The video will be embedded properly if we go to Tiktok desktop version -- so the link will be this:

https://www.tiktok.com/@zobeebop/video/6910966691128298758

And to achieve that, we need to do:

1. Open Tiktok on desktop version
2. Search the video
3. Copy-paste the link

Or...

1. Copy-paste the link https://vt.tiktok.com/ZSTD5bW7/ to a web browser
2. Click the share icon
3. Then, we will get the expected working embed link: https://www.tiktok.com/@zobeebop/video/6910966691128298758

---

This might be under Tiktok's area, but I want to check if this is something we can work or maybe the only way to embed the Tiktok video is using the desktop version. Thank you!

WordPress information

• WordPress version: 5.6
• Gutenberg: v9.7.3
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes. Spearhead. This can be replicated on other themes too (non-Varia themes)

Device information

Device: iPhone 11 Max Pro, MacBook Pro Big Sur (11.1), Chrome 87.0.4280.141

[talldan]

Thanks for the report @retnonindya. It does indeed look like that shorthand format for TikTok URLs isn't supported. It should hopefully be a fairly straightforward thing to update, though it will require changes both here in Gutenberg and WordPress core, so I've made a trac ticket for the core change:
https://core.trac.wordpress.org/ticket/52319#ticket

[talldan]

Hmm, just looking into it some more, and it doesn't look as though TikTok's embed system works with that URL format either.

This is the URL we use to get information about an embed for the video you shared using the normal URL format:
https://www.tiktok.com/oembed?url=https://www.tiktok.com/@zobeebop/video/6910966691128298758

As you can see when clicking on it, you get a valid JSON structure with info.

For the shorthand URL:
https://www.tiktok.com/oembed?url=https://vt.tiktok.com/ZSTD5bW7/

Just an error message. It looks like nothing can be done here, so I'll close the issue.

[retnonindya]

Thanks, @talldan!

Just to confirm, so the shortlink-format is the issue -- even Tiktok's oembed checker gave error? 🤔 And definitely not from Gutenberg, yeah? I tested with several other shortlinks, and I got the same error. Oh well... 😅

Thanks again, Daniel 🙏 I really appreciate you checked into this!

[talldan]

@retnonindya That's right, TikTok's own API doesn't support it. I have a feeling the URL format you shared is part of a separate URL shortener system, and probably involves a redirect, so TikTok's API can't read from it.