抖音视频分享到网页中，是不能直接分享的，不像b站视频一样直接分享。我们可以先获取抖音视频的id，然后放到下面的代码中就可以了。很简单。

<div class="dy-fit">
  <div class="dy-fit__stage">
    <iframe src="https://open.douyin.com/player/video?vid=7386221877582155062&autoplay=0"
      allowfullscreen webkitallowfullscreen
      allow="fullscreen; autoplay; encrypted-media; picture-in-picture"
      scrolling="no" referrerpolicy="no-referrer" loading="lazy"></iframe>
  </div>
</div>

<style>
.dy-fit {
  position: relative; width: 100%; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 16 / 9) {          /* 老浏览器兜底 */
  .dy-fit::before { content: ""; display: block; padding-top: 56.25%; }
}
.dy-fit__stage {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;                 /* 设计渲染尺寸，别改小 */
  transform-origin: top left; transform: scale(1);
}
.dy-fit__stage iframe {
  width: 100%; height: 100%; border: 0; display: block;
  min-width: 100%; max-width: 100%;             /* 锁死 iOS 撑开 bug */
}
</style>

<script>
(function () {
  var BASE_W = 1280, BASE_H = 720;
  function fit(box) {
    var w = box.clientWidth;
    if (!w) return;
    var s = w / BASE_W;
    box.querySelector('.dy-fit__stage').style.transform = 'scale(' + s + ')';
    box.style.height = (BASE_H * s) + 'px';     // 显式高度，不依赖 aspect-ratio
  }
  function fitAll() { document.querySelectorAll('.dy-fit').forEach(fit); }
  fitAll();
  window.addEventListener('resize', fitAll);
  window.addEventListener('orientationchange', function () { setTimeout(fitAll, 300); });
  if (window.ResizeObserver) {
    var ro = new ResizeObserver(function (es) { es.forEach(function (e) { fit(e.target); }); });
    document.querySelectorAll('.dy-fit').forEach(function (b) { ro.observe(b); });
  }
})();
</script>