如何关闭Unbounce页面中嵌入TikTok视频的自动播放功能？

我在Unbounce托管的着陆页中使用TikTok官方提供的嵌入代码添加了视频，但页面加载时视频会自动播放。之前尝试在URL中添加autoplay=0但未生效，想改成仅用户点击播放按钮时才启动播放。

原嵌入代码：

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@fairytailcrossing/video/7219450454705573162" data-video-id="7219450454705573162" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@fairytailcrossing" href="https://www.tiktok.com/@fairytailcrossing?refer=embed">@fairytailcrossing</a> Aiight 🤓👏🏻  S&#47;O to Type sent me a fanny pack for healthcare workers. Go check out link in my bio to order your own all proceeds go to help healthcare workers. <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou?refer=embed">#foryou</a> <a title="fannypack" target="_blank" href="https://www.tiktok.com/tag/fannypack?refer=embed">#fannypack</a> <a title="aiight" target="_blank" href="https://www.tiktok.com/tag/aiight?refer=embed">#aiight</a> <a title="laboratory" target="_blank" href="https://www.tiktok.com/tag/laboratory?refer=embed">#laboratory</a> <a title="laboratorylife" target="_blank" href="https://www.tiktok.com/tag/laboratorylife?refer=embed">#laboratorylife</a> <a title="dance" target="_blank" href="https://www.tiktok.com/tag/dance?refer=embed">#dance</a> <a title="dancing" target="_blank" href="https://www.tiktok.com/tag/dancing?refer=embed">#dancing</a> <a title="hospitallife" target="_blank" href="https://www.tiktok.com/tag/hospitallife?refer=embed">#hospitallife</a> <a title="healthcareworker" target="_blank" href="https://www.tiktok.com/tag/healthcareworker?refer=embed">#healthcareworker</a> <a target="_blank" title="♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM" href="https://www.tiktok.com/music/AIGHT-7086655651392260097?refer=embed">♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

解决方法 #

TikTok的嵌入脚本通过读取<blockquote>标签上的data属性控制播放行为，而非URL参数。只需给带有tiktok-embed类的blockquote添加data-autoplay="false"属性，即可禁用自动播放。

修改后的完整代码：

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@fairytailcrossing/video/7219450454705573162" data-video-id="7219450454705573162" data-autoplay="false" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@fairytailcrossing" href="https://www.tiktok.com/@fairytailcrossing?refer=embed">@fairytailcrossing</a> Aiight 🤓👏🏻  S&#47;O to Type sent me a fanny pack for healthcare workers. Go check out link in my bio to order your own all proceeds go to help healthcare workers. <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou?refer=embed">#foryou</a> <a title="fannypack" target="_blank" href="https://www.tiktok.com/tag/fannypack?refer=embed">#fannypack</a> <a title="aiight" target="_blank" href="https://www.tiktok.com/tag/aiight?refer=embed">#aiight</a> <a title="laboratory" target="_blank" href="https://www.tiktok.com/tag/laboratory?refer=embed">#laboratory</a> <a title="laboratorylife" target="_blank" href="https://www.tiktok.com/tag/laboratorylife?refer=embed">#laboratorylife</a> <a title="dance" target="_blank" href="https://www.tiktok.com/tag/dance?refer=embed">#dance</a> <a title="dancing" target="_blank" href="https://www.tiktok.com/tag/dancing?refer=embed">#dancing</a> <a title="hospitallife" target="_blank" href="https://www.tiktok.com/tag/hospitallife?refer=embed">#hospitallife</a> <a title="healthcareworker" target="_blank" href="https://www.tiktok.com/tag/healthcareworker?refer=embed">#healthcareworker</a> <a target="_blank" title="♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM" href="https://www.tiktok.com/music/AIGHT-7086655651392260097?refer=embed">♬ AIGHT - WESTSIDE BOOGIE &#38; DRAM</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

说明 #

添加data-autoplay="false"后，视频会默认处于暂停状态，仅当用户主动点击播放按钮时才开始播放，完全适配Unbounce着陆页的需求。之前修改URL参数无效，是因为TikTok嵌入逻辑不读取URL中的autoplay参数，仅识别blockquote标签上的data属性。

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