I2I: Create a component to display Tiktok posts

rbeckthomas commented 3 years ago

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 blockquoteelement.

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.

<amp-tiktok
  data-video-id="..."
  width="..."
  height="..."
  data-lang="..."
  data-cite="...">
</amp-tiktok>

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.

+ <amp-tiktok width="500" height="800">
     <blockquote
+     placeholder
      class="tiktok-embed"
      cite="https://www.tiktok.com/@scout2015/video/6718335390845095173"
      data-video-id="6718335390845095173"
      style="max-width: 605px; min-width: 325px"
    >
      <section>
        <a
          target="_blank"
          title="@scout2015"
          href="https://www.tiktok.com/@scout2015"
          >@scout2015</a
        >
        <p>
          Scramble up ur name & I'll try to guess it😍❤️
          <a
            title="foryoupage"
            target="_blank"
            href="https://www.tiktok.com/tag/foryoupage"
            >#foryoupage</a
          >
          <a
            title="petsoftiktok"
            target="_blank"
            href="https://www.tiktok.com/tag/petsoftiktok"
            >#petsoftiktok</a
          >
          <a
            title="aesthetic"
            target="_blank"
            href="https://www.tiktok.com/tag/aesthetic"
            > #aesthetic</a
          >
        </p>
        <a
          target="_blank"
          title="♬ original sound - tiff"
          href="https://www.tiktok.com/music/original-sound-6689804660171082501"
          >♬ original sound - tiff</a
        >
      </section>
    </blockquote>
-  <script async src="https://www.tiktok.com/embed.js"></script>
+ </amp-tiktok>

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

westonruter commented 3 years ago

I'm seeing layout shifting with the current component: https://github.com/ampproject/amphtml/issues/35789

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml