ampproject / ampproject/amphtml

I2I: Create a component to display Tiktok posts

Open
#32,219 2 comments 3 reactions 0 assignees View on GitHub
INTENT TO IMPLEMENT
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## Summary
This component will consist of a Tiktok embed, which is a single video file loaded through an `iframe`.
A TikTok video URL consists of a base URL, a TikTok video identifier, and a language code ex: https://www.tiktok.com/embed/v2/6718335390845095173/en-US

Here the TikTok video identifier is '6718335390845095173', and the language code is 'en-US'
A TikTok video id is required to display the content.

The width and height of the component can be set initially, however the actual width and height of the iframe will be retrieved through a post message.

## Motivation
The TikTok application has had, as of October 2020 roughly, 2 Billion downloads worldwide. This is a widely used application and embedded TikToks are fairly common in many documents.

## Attributes
### Required attributes:
- `data-video-id` - this is the TikTok videoId which identifies the video being embedded. This attribute is a required part of either the `amp-tiktok` component or the child `blockquote` component which is an allowed child of `amp-tiktok`
- ` width`, `height` - these attributes are required, however these may not represent the final height of the component.

### Conditionally Required attributes:
- `placeholder` - this attribute is a required part of the `blockquote` based implementation of `amp-tiktok`, this attribute will be required to be added to the `blockquote `element.

### Optional attributes:
- `data-lang` - this attribute represents the language to display the TikTok in, when not provided this defaults to ‘en-US’.
- `data-cite` - this attribute will contain the request URL for an oEmbed response which will contain the Thumbnail URL for the Tiktok. This can be found within the TikTok generated embed code.

## User Code Sample
This component will have two valid code formats. The first one is simply an amp TikTok component which will include the required data-video-id, width, and height attributes and potentially the video language code.

```html

```

A second format for this component will include a `blockquote`. This `blockquote` can be copied directly from the TikTok generated HTML embed code. The developers will be required to add a `placeholder` attribute to the `blockquote` as well.

It may be prudent to have developers also remove the generated `style` attribute within the `blockquote` for clarity, as the component will respect the `width` and `height` of the parent component over those in the `style` attribute.

```diff
+



@scout2015


Scramble up ur name & I'll try to guess it😍❤️
#foryoupage
#petsoftiktok
#aesthetic


♬ original sound - tiff


-
+
```

## Calculating Component Height
While the user can set a width and height which will be respected on the initial component layout, the component will attempt to resize to its natural size if it is not already visible.

On initial layout, the component will be cropped to the size of the width and height dimensions provided by the user. However we will attempt to resize the i-frame to the natural height and width of the embed after the initial layout, provided that the component is sufficiently far from the viewport.

There are two potential methods of resizing the element after layout.

`attemptChangeHeight`
- With fallback mechanism e.g. click-to-resize
- Support "overflow element"

`forceChangeHeight`
- Precedence: amp-instagram, amp-twitter, other 3p

## Thumbnail
TikTok Supports the use of the oEmbed API; this api will return in its response, a link to the thumbnail for the TikTok.

The URL required for the oEmbed request can be found in the `cite` attribute within the `blockquote` element which can be found in the TikTok generated HTML embed code.

If we would like to allow thumbnails for TikToks which do not include a `blockquote` placeholder, this attribute with the appropriate URL would be required.

## Autoplay
Tiktok doesn't expose a postMessage interface to control play/mute/etc. so we can't support autoplay.

## Bento vs. Classic Component
This component could justifiably work as both a Classic AMP component and as a Bento component. For discussion is whether this component should be built as a Classic component which is then ported to Bento or solely as a Bento component.

## Design document

https://docs.google.com/document/d/14lcR4szqnVnjp5TcBR9RJb4dh0z7Wg_tAaiq0721RDo/edit?usp=sharing

## Launch tracker

/cc @ampproject/wg-approvers

Contributor guide

Open the contributing guide

Research direction

Start by reviewing this issue and the linked design document, then resolve whether the component should be implemented as Classic AMP, Bento, or both. The work is done when the agreed component supports the documented direct and blockquote formats, sizing behavior, thumbnail handling, and validation requirements.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.