如何调整嵌入式TikTok组件高度且不裁剪嵌入视频内容

嵌入式视频具备自适应长宽比特性

上述特性指的是TikTok嵌入视频会默认保持原生9:16的竖屏比例，随容器宽度自动匹配对应高度，而非任意拉伸适配自定义高度，直接硬改容器高度会破坏比例，导致内容溢出或裁剪。

解决方案 #

方案一：按原比例缩小整体尺寸（无变形、无裁剪，官方推荐） #

通过比例控制同步缩小宽高，高度会随宽度自动计算，无需手动固定：

• 在外层新增自定义容器，用aspect-ratio属性固定9:16的显示比例，调整容器最大宽度即可控制整体尺寸
• 强制覆盖嵌入元素和iframe的默认样式，使其填满外层容器

代码示例：

<div class="tiktok-custom-container">
  <!-- 此处粘贴官方生成的TikTok嵌入代码 -->
  <blockquote class="tiktok-embed" cite="..." data-video-id="...">
    ...
  </blockquote>
</div>

.tiktok-custom-container {
  /* 宽度按需要的高度换算：目标高度 * 9 / 16，比如要高度500px则设为281px */
  max-width: 281px;
  width: 100%;
  aspect-ratio: 9 / 16;
}
.tiktok-custom-container .tiktok-embed,
.tiktok-custom-container iframe {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

方案二：强制固定高度（允许左右留空） #

如果必须固定容器高度为指定值，不需要适配不同宽度，可让视频水平居中，左右填充背景色避免裁剪：

.tiktok-custom-container {
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  /* 自定义留空区域的背景色，和TikTok播放器背景一致可设置为#000 */
  background-color: #000;
  overflow: hidden;
}
.tiktok-custom-container .tiktok-embed,
.tiktok-custom-container iframe {
  height: 100% !important;
  width: calc(500px * 9 / 16) !important;
  max-width: unset !important;
}

内容的提问来源于stack exchange，提问作者Joseph Harrison-Lim