如何移除落地页中嵌入TikTok视频的下方信息流

我在落地页中使用以下代码嵌入TikTok视频，希望移除视频下方的信息流，仅保留纯视频内容，尝试过CSS和JavaScript实现但未成功，代码如下：

<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="box">
  <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@bighatmagic/video/6917125669415701765" data-video-id="6917125669415701765" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@bighatmagic" href="https://www.tiktok.com/@bighatmagic?refer=embed">@bighatmagic</a> How to Stretch a Hat ~ all you need is a hat stretcher + steamer  <a title="hat" target="_blank" href="https://www.tiktok.com/tag/hat?refer=embed">#hat</a> <a title="hatmaker" target="_blank" href="https://www.tiktok.com/tag/hatmaker?refer=embed">#hatmaker</a> <a title="customhat" target="_blank" href="https://www.tiktok.com/tag/customhat?refer=embed">#customhat</a> <a title="malibu" target="_blank" href="https://www.tiktok.com/tag/malibu?refer=embed">#malibu</a> <a title="teressafoglia" target="_blank" href="https://www.tiktok.com/tag/teressafoglia?refer=embed">#teressafoglia</a> <a title="femalemaker" target="_blank" href="https://www.tiktok.com/tag/femalemaker?refer=embed">#femalemaker</a> <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="foryourpage" target="_blank" href="https://www.tiktok.com/tag/foryourpage?refer=embed">#foryourpage</a> <a target="_blank" title="♬ CRAFT - OFEKNIV" href="https://www.tiktok.com/music/CRAFT-6732297013599143937?refer=embed">♬ CRAFT - OFEKNIV</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
  </div>
</div>

方法1：使用TikTok官方嵌入参数（最可靠） #

TikTok的嵌入组件支持data-embed-type参数，将其设置为video即可强制只展示纯视频内容，自动隐藏下方的信息流。只需修改你的<blockquote>标签，添加该参数：

<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="box">
  <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@bighatmagic/video/6917125669415701765" data-video-id="6917125669415701765" data-embed-type="video" style="max-width: 605px;min-width: 325px;" > 
    <section> 
      <a target="_blank" title="@bighatmagic" href="https://www.tiktok.com/@bighatmagic?refer=embed">@bighatmagic</a> How to Stretch a Hat ~ all you need is a hat stretcher + steamer  
      <a title="hat" target="_blank" href="https://www.tiktok.com/tag/hat?refer=embed">#hat</a> 
      <a title="hatmaker" target="_blank" href="https://www.tiktok.com/tag/hatmaker?refer=embed">#hatmaker</a> 
      <a title="customhat" target="_blank" href="https://www.tiktok.com/tag/customhat?refer=embed">#customhat</a> 
      <a title="malibu" target="_blank" href="https://www.tiktok.com/tag/malibu?refer=embed">#malibu</a> 
      <a title="teressafoglia" target="_blank" href="https://www.tiktok.com/tag/teressafoglia?refer=embed">#teressafoglia</a> 
      <a title="femalemaker" target="_blank" href="https://www.tiktok.com/tag/femalemaker?refer=embed">#femalemaker</a> 
      <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> 
      <a title="foryourpage" target="_blank" href="https://www.tiktok.com/tag/foryourpage?refer=embed">#foryourpage</a> 
      <a target="_blank" title="♬ CRAFT - OFEKNIV" href="https://www.tiktok.com/music/CRAFT-6732297013599143937?refer=embed">♬ CRAFT - OFEKNIV</a> 
    </section> 
  </blockquote> 
  <script async src="https://www.tiktok.com/embed.js"></script>
  </div>
</div>

方法2：CSS容器截断（备用方案） #

如果官方参数失效，可通过给外层容器设置固定高度并隐藏溢出内容，只保留视频区域。TikTok竖版视频的常规高度为560px左右，你可以根据实际情况调整：

.box {
  height: 560px;
  overflow: hidden;
  position: relative;
}

.box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

注意：这种方法可能会因TikTok嵌入组件的结构变化失效，需要定期检查调整高度。

方法3：JavaScript监听并隐藏信息流（极端情况备用） #

利用MutationObserver监听嵌入内容的加载，找到信息流对应的DOM元素并隐藏。由于同源策略限制，此方法仅在TikTok允许你的域名访问iframe内部内容时生效：

// 等待embed.js加载完成
setTimeout(() => {
  const tiktokIframe = document.querySelector('.tiktok-embed iframe');
  if (!tiktokIframe) return;

  // 监听iframe内部DOM变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      // 找到信息流容器（类名可能随TikTok更新变化，需自行验证）
      const feedContainer = tiktokIframe.contentDocument.querySelector('.tiktok-embed-feed');
      if (feedContainer) {
        feedContainer.style.display = 'none';
        observer.disconnect(); // 找到后停止监听
      }
    });
  });

  // 开始监听
  observer.observe(tiktokIframe.contentDocument.body, { childList: true, subtree: true });
}, 2000);

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