TikTok offers an embedded API for developers to view TikToks on other websites. From the documentation, they mention the following:
Embedded videos come with adaptive length-to-width ratio
My presumption is that when I change the embedded video's container's height, the length/width will adapt to it. This, however, isn't working out too well for me. Setting the size of the element containing the embed to 500px
code does nothing, and the embedded TikTok video overflows with a height of about 700px
. Changing the height of the blockquote with .tiktok-embed
has a different effect: It does change the size of the embedded video's iframe, but the content inside doesn't attempt to fit this, and it gets cut off instead. I would like to set a height that is smaller than default, and have the video adapt to the size I have chosen.
I have a reproducible case here on codesandbox. How do I make it so that I can change the height of the embed to a smaller height without the embed being clipped?