如何在网页中嵌入抖音的视频

要想在网页中嵌入抖音视频，可以通过以下步骤实现‌： ‌

✅第一步：获取视频链接‌

需要找到想要嵌入的视频，并复制其分享链接。这个链接通常可以在视频页面找到，形式如https://v.douyin.com/********/‌ ‌

✅第二步：提取视频ID‌

将复制的链接在浏览器中打开，找到视频的ID。视频ID通常位于链接的某个部分，
形式如73**********************127‌1。 ‌

✅第三步：生成IFrame代码‌

将提取的视频ID，粘贴到下面这个网址，替换对应的位置[id]
https://open.douyin.com/api/douyin/v1/video/get_iframe_by_video?video_id=[id]

形式如：https://open.douyin.com/api/douyin/v1/video/get_iframe_by_video?video_id=73**********************127‌1

比如原视频地址：https://www.douyin.com/user/self?modal_id=7578091056131901007（深圳市奇蒙玩具制品有限公司已授权使用）
提取id：7578091056131901007
获取视频API：https://open.douyin.com/api/douyin/v1/video/get_iframe_by_video?video_id=7578091056131901007 将这个网址粘贴到浏览器打开，获得如下代码。

{“data”:{“iframe_code”:”\u003ciframe width=\”1080\” height=\”1920\” frameborder=\”0\” src=\”https://open.douyin.com/player/video?vid=7578091056131901007\u0026autoplay=0\” referrerpolicy=\”unsafe-url\” allowfullscreen\u003e\u003c/iframe\u003e”,”video_height”:1920,”video_title”:”20000个冰块麦芽糖捏捏全力赶货中 20000个冰块麦芽糖捏捏乐30号交货，今天还在灌糖及清洁，可能会延期1-2天，延期1-2天您们觉得正常吗？ #捏捏乐工厂 #捏捏乐定制 #麦芽糖捏捏乐 #冰块麦芽糖捏捏 #潮玩定制”,”video_width”:1080},”err_msg”:””,”err_no”:0,”log_id”:”20251220115658022664783B73E8AE7E22″}

我们需要转化一下这个代码，可以直接把代码发给AI帮我们转换成iframe的代码，需要注意的是调整好分辨率，比如横屏16/9分辨率设置为1920*1080，竖屏9/16分辨率设置为720*1280。

<div style="position:relative;width:100%;max-width:420px;margin:auto;aspect-ratio:9/16;overflow:hidden;">
  <iframe
    src="https://open.douyin.com/player/video?vid=7578091056131901007&autoplay=0"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    frameborder="0"
    referrerpolicy="unsafe-url"
    allowfullscreen>
  </iframe>
</div>

✅第四步：嵌入视频代码

将生成的IFrame代码复制，并将其嵌入到目标网页中。

📌 注意

通常生成的IFrame代码是违规的，比如：\"是转义的双引号，这导致代码格式不正确。要将它转换为标准的 HTML iframe 代码，直接使用双引号 "

🔔 提醒

1. 检查URL中的非法字符

确保 iframe 标签中引用的视频URL没有包含以下常见的非法字符：

• < 或 >
• ' 或 "
• & 或 ;
• #, %, {}, [], 等。

这些字符可能被认为是潜在的攻击向量，因此会触发防注入系统。

2. URL编码

如果你的URL中确实需要使用特殊字符（如 & 或 =），可以尝试对这些字符进行URL编码。例如：

• & 编码为 %26
• = 编码为 %3D

3. 防火墙限制

如果你检查了代码没有问题，可能是你的网站防火墙或安全配置过于严格，导致合法的请求被误判为非法请求。在这种情况下，你需要联系网站管理员或开发人员，调整防火墙设置或安全策略，放宽对 iframe 标签的限制。

4. 询问AI如何转换标准的iframe代码

一个快捷的方法，如果代码提示非法，可以请教AI帮助我们转换成标准的iframe代码

嵌入抖音视频的应用场景

1. 内容展示与互动

• 产品演示：通过抖音短视频展示产品的使用方法和功能，例如解压玩具、家居用品等。
• 用户评价：嵌入用户上传的视频，提高产品或品牌的可信度。
• 创意内容：利用抖音上的创意短视频为网页增添趣味性，吸引用户注意力。

2. 营销活动宣传

• 嵌入品牌抖音账号的热门视频，用于推广新产品或活动。
• 例如，电商网站可以在首页嵌入“双11”活动视频，让用户了解促销信息。

3. 博客和教程内容增强

• 在教程或文章中嵌入抖音视频，生动展示操作过程，例如手工制作、烹饪技巧等。
• 例如，DIY网站可以通过嵌入视频，让用户快速理解教程内容。

4. 社交媒体整合

• 嵌入品牌抖音账号的视频，鼓励用户关注并参与互动。
• 可以在视频下方添加“点击关注”或“点赞我们的视频”的提示，推动社交媒体粉丝增长。

5. 事件记录与纪念

• 嵌入品牌发布的活动视频，例如展会、产品发布会等，让用户回顾活动亮点。
• 适用于企业官网的“新闻动态”或“关于我们”页面。