Displays a TikTok video embed.
<script async custom-element="amp-tiktok" src="https://cdn.ampproject.org/v0/amp-tiktok-0.1.js"></script>
amp-tiktok component embeds a TikTok video on your page.
<amp-tiktok width="325" height="575" data-src="6718335390845095173" ></amp-tiktok>
amp-tiktok component displays the TikTok video in an iframe. You may specify the
amp-tiktok does not support autoplay and requires user interaction to play videos.
Avoiding Layout shift
Prevent layout shift by matching the
height attributes on the
amp-tiktok element to the size of the video player.
By default, the width of the
amp-tiktok iframe is 325px, resulting in a hight of roughly 575px. The default height of the embedded TikTok video player depends on the length and content of the TikTok caption. To show the entire video, the
amp-tiktok component resizes to match the player height. You can avoid this by defining the width and height to match the video player.
<amp-tiktok width="325" height="731" data-src="6718335390845095173" ></amp-tiktok>
If you choose to set the width to a value which is greater than 325px, the
iframe will remain 325px and will be horizontally centered in that space. The surrounding space will be empty.
If you choose to set the height of to a value which is which is greater than the height the height will remain the height of the
There are two ways to set a placeholder image:
- Pointing the
data-srcattribute to the image URL
- Pointing the TikTok provided
citeattribute, made available through
blockquote, to the image URL.
data-src attribute can contain one of two values: a video id or a full URL to a TikTok detail page.
Example with video-id
<amp-tiktok width="325" height="575" data-src="6948210747285441798" ></amp-tiktok>
Example with source url:
<amp-tiktok width="325" height="575" data-src="https://www.tiktok.com/@scout2015/video/6948210747285441798" ></amp-tiktok>
In lieu of the
amp-tiktok also allows the use of the TikTok generated embed code to display.
To use this method copy the blockquote from the TikTok Embed code:
- Refer to the (TikTok embed documentation)[https://developers.tiktok.com/doc/Embed] to find the embed code for your TikTok.
- Copy the embed code and add it as a child element of the
- Add the
placeholderattribute to the
- Remove the
styleattribute from the
VIM is great.... right up until you start typing the commands into every single text editor you see. I’d like to apologize for all my unneeded ":wq"’s♬ original sound - countingprimes
<amp-tiktok width="300" height="800"> <blockquote placeholder class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6948210747285441798" data-video-id="6948210747285441798" > <section> <a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes" >@countingprimes</a > <p> VIM is great.... right up until you start typing the commands into every single text editor you see. I’d like to apologize for all my unneeded ":wq"’s </p> <a target="_blank" title="♬ original sound - countingprimes" href="https://www.tiktok.com/music/original-sound-6948210588145175302" >♬ original sound - countingprimes</a > </section> </blockquote> </amp-tiktok>
If the user provides an
aria-label then that label will be propogated to the
If the user proides an oEmbed source URL as the
data-src then the TikTok's caption will be used as the
aria-label with the format 'Tiktok: "Caption"'. Otherwise the
aria-label will default to 'TikTok'.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack Overflow Found a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub