amp-tiktok has layout shift

[westonruter]

Description

The amp-tiktok docs state:

Avoiding Layout shift

Prevent layout shift by matching the width and 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.

I tried following this advice and obtaining the exact height of the element after the page has loaded:

<amp-tiktok height="721" layout="fixed-height" data-src="https://www.tiktok.com/@countingprimes/video/6988237085899574533"></amp-tiktok>

Nevertheless, there is layout shift that is happening when the video loads:

amp-tiktok-layout-shift.mov

While the page ends up with the same initial layout, there is a moment when the amp-tiktok grows too tall before shrinking back down.

Reproduction Steps

Try example on AMP Playground.

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2108052321001

[westonruter]

@rebeccanthomas FYI: I did some more research into how layout shifting could be reduced based on the oEmbed response that TikTok provides. See this PR for the WordPress plugin which seems to make a pretty good estimation of the height by examining the length of the video description: ampproject/amp-wp#6586