Easy TikTok embedding with the new amp-tiktok


tl;dr You can now use <amp-tiktok>  to directly embed TikTok content into your documents.

TikTok is one of the most popular social media sites with over 2 billion mobile downloads worldwide as of October 2020. As such, we are excited to share that you can now easily embed TikTok content into your valid AMP Documents using the <amp-tiktok> component. 

@countingprimes You can now embed TikTok’s in AMP ♬ original sound – countingprimes

How does it work?

In the simplest example all an <amp-tiktok> needs to work are the width, height, and data-src attributes. 

The data-src attribute refers to either the video id for the TikTok, or its full URL, both of which can be found on the source page for the TikTok. More information about finding these sources can be found in TikTok’s embed documentation.

Using the TikTok’s full URL for the data-src attribute has the added benefit of including a placeholder thumbnail image, and includes the TikTok’s caption as a part of  the aria-label on the embedded iframe for improved accessibility. 

Additionally, <amp-tiktok> supports the use of the TikTok auto-generated embed code, about which more information can be found in the amp-tiktok documentation.

Sites running the AMP plugin for WordPress (v2.1.4+) will automatically use <amp-tiktok> when a TikTok embed is added (such as via the TikTok block). Previously the <amp-embedly-card> component was utilized.

Posted by Beck Thomas, Software Engineer, AMP Project