如何移除移动端flex布局下嵌入TikTok视频两侧的空白

解决方案 #

空白是TikTok官方嵌入代码自带的固定宽度限制、脚本渲染逻辑导致的，可按以下步骤修复：

1. 全局添加CSS覆盖默认样式
   将以下代码加入站点的全局样式表，或页面<style>标签内：

/* 外层TikTok容器适配 */
.luxx-tiktok {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 若需要卡片左右留少量边距可加padding，比如padding: 0 10px; */
}

/* 覆盖嵌入块的硬编码宽度限制 */
.luxx-tiktok .tiktok-embed {
  width: 100% !important;
  min-width: unset !important;
  max-width: 100% !important;
  margin: 0 0 20px 0 !important; /* 按需调整卡片上下间距，移除默认左右边距 */
}

/* 适配渲染后生成的iframe */
.luxx-tiktok .tiktok-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
}

2. 优化嵌入脚本加载
   你当前每个视频后都重复加载了一次TikTok的embed.js，多次加载会导致渲染异常，将所有<script async src="https://www.tiktok.com/embed.js"></script>删除，仅在页面</body>闭合标签前加载一次即可。

3. 确认移动端视口配置
   检查页面头部是否存在正确的viewport标签，没有则添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

内容的提问来源于stack exchange，提问作者TrueChow