内嵌抖音视频

抖音开放平台提供了内嵌抖音视频的方法，详见《通过VideoID获取IFrame代码》。

示例代码：

<iframe width="100%" height="100%" frameborder="0" src="https://open.douyin.com/player/video?vid=7458617091420114236&autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe>

与B站不同，抖音iframe没有做自适应，需要结合自己网站调整样式。下面以我的网站为例。

手机端代码：

<style>
.douyin {
    width: min(324px, 100%);
    margin-inline: auto;
    overflow: hidden
}
.douyin iframe {
    aspect-ratio: .4821
}
</style>

<div class="douyin">
<iframe src="https://open.douyin.com/player/video?vid=7458617091420114236&autoplay=0" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" allowfullscreen></iframe>
</div>

电脑端代码：

<style>
.douyin {
    width: max(730px, 100%);
    margin-inline: auto
}
</style>

<div class="douyin">
<iframe src="https://open.douyin.com/player/video?vid=7458617091420114236&autoplay=0" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" allowfullscreen></iframe>
</div>

写这篇文章的起因是我刷到了上面这条搞笑视频，想写文章分享。之前在风记星辰那里看到过内嵌抖音视频，参考他的样式，并研究了抖音官方文档，实现了期望效果。不过有一个坑是父级元素宽度小于730px会强制使用手机端竖版视频。我目前解决办法是临时增加文章页宽度来适配。

另外看这种视频本来不应该过脑子，但是因为要发表出来，出于负责任的态度，我做了进一步验证。视频中的巧合太过戏剧性，果不其然是合成的，我找到了原视频：

看了原视频索然无味，也没有分享的价值。然后这篇又写成了技术文。