YouTube嵌入代码生成器

粘贴视频、Shorts或播放列表链接,选好选项,复制简洁的嵌入代码,支持开始和结束时间、隐私增强模式以及自适应尺寸。全部在你的浏览器中运行。

播放器选项
尺寸

这个YouTube嵌入代码生成器会生成把YouTube视频、Shorts或播放列表放到你网站上所需的HTML,并且提供YouTube自带的“分享 → 嵌入”框里没有的选项。你可以设置开始和结束时间、自动播放(包括浏览器允许的静音自动播放)、循环、字幕、隐私增强模式,以及能适应任何屏幕的自适应尺寸,然后复制代码,粘贴到你的页面里。实时预览会随着你的操作显示播放器的样子。一切都在你的浏览器里完成,不会向Marqly发送任何内容,而且每个选项都对应YouTube官方播放器参考文档中记载的参数。

如何在你的网站上嵌入YouTube视频

  1. 从YouTube复制视频的链接,可以是观看页面、Shorts、直播、youtu.be短链接,或者包含list=的播放列表链接。
  2. 粘贴到上面。如果链接里带有?t=90这样的时间戳,开始时间会自动填入。
  3. 选择你的选项,代码和预览会即时更新。
  4. 点击复制代码,粘贴到页面的HTML里:在WordPress中使用“自定义HTML”区块;在大多数建站工具里使用“嵌入”或“HTML”元素。

每个选项及其对应的参数

选项参数作用
开始时间start从视频中的这个秒数开始播放。播放器会跳到最近的关键帧,因此可能最多提前约两秒。
结束时间end在这个时间点停止播放,时间从视频开头算起,而不是从你的开始时间算起。
自动播放autoplay=1播放器加载后就开始播放视频。YouTube指出,此时播放数据的收集会在页面加载时进行。
循环播放loop=1重复播放播放列表;对于单个视频,YouTube还要求把playlist设为同一个视频ID,生成器会替你加上。
显示播放器控件关闭时为controls=0隐藏控制栏。
全屏按钮关闭时为fs=0隐藏全屏按钮。
默认开启字幕cc_load_policy=1在视频有字幕时默认显示字幕。
仅推荐同一频道的视频rel=0把结束时显示的相关视频限制为同一频道的视频。
在iPhone上内嵌播放playsinline=1在iOS上于页面内播放,而不是跳转到全屏。
禁用键盘控制disablekb=1关闭快捷键,例如k暂停,j/l快退或快进10秒。
白色进度条color=white把进度条中已观看的部分显示为白色,而不是红色。
隐私增强模式youtube-nocookie.com使用YouTube的隐私增强嵌入域名(见下文)。

开始和结束时间

YouTube播放器以整数秒作为开始和结束时间,所以无论你输入的是90、1:30、1:02:03还是1h2m3s,生成器都会把它转换成秒。两者都是从视频的最开头算起:想播放从1:30到2:00的片段,请把开始时间设为1:30、结束时间设为2:00,而不是把结束时间写成0:30。如果你想把某个时刻作为链接分享而不是嵌入,请使用YouTube时间戳链接生成器。

为什么嵌入的视频不会自动播放,以及解决办法

视频能否自行开始播放由浏览器决定。YouTube的IFrame API文档把没有用户交互的非静音播放列为浏览器会阻止的情形之一,所以单独使用autoplay=1常常没有效果。可靠的做法是以静音状态开始:选择静音自动播放(JavaScript API),生成器会生成嵌入代码,外加一小段脚本,它会加载YouTube官方的IFrame Player API,在播放器就绪时将其静音并开始播放。访客一键就能取消静音。

YouTube对API客户端的规定还有两个值得遵守的条件:在播放器超过一半的区域出现在屏幕上之前,不得自动开始播放;同一个页面上同一时间不得有多个YouTube播放器自动播放。页面顶部的主视觉视频没有问题,而页面很靠下位置的自动播放视频则不行。

隐私增强模式(youtube-nocookie.com)

隐私增强模式会把嵌入网址中的www.youtube.com替换为www.youtube-nocookie.com。YouTube帮助中心表示,它可以防止对嵌入视频的观看影响访客的YouTube浏览体验,展示非个性化广告,并且不会让这些观看用来个性化访客在你网站之外看到的广告。这里默认开启它,因为这不需要任何代价。但它不能保证嵌入内容不设置Cookie或不做任何跟踪,它本身也不会让嵌入内容自动符合任何隐私法规,无论如何,请在你的隐私政策和同意设置中说明使用了YouTube。

自适应的YouTube嵌入,包括Shorts

默认的iframe是固定的560 × 315尺寸,在手机上会溢出。开启自适应后,代码会把播放器设为占其容器100%的宽度,并用CSS的aspect-ratio属性保持比例,在当前所有浏览器里都不需要用padding-bottom包裹元素。为Shorts选择9:16,竖屏视频就不会被加黑边;这时宽度输入框会限制它最宽能到多少。YouTube要求嵌入的播放器至少为200 × 200像素,并建议16:9的播放器至少为480 × 270,所以生成器的宽度不会低于200像素。

点击后加载的嵌入,让页面更快

YouTube的iframe会在页面加载时就加载完整的播放器,对于大多数访客根本不会播放视频的页面来说,这太重了。点击后加载的输出会先显示视频的缩略图和播放按钮,只在有人点击它(或在上面按回车键)时才换成真正的播放器并开始播放。页面速度因此提升,在访客选择观看之前,也不会向播放器请求任何内容。它适用于单个视频;播放列表使用标准的iframe。

已经失效的参数

  • modestbranding已被弃用,没有任何效果;YouTube现在根据播放器的尺寸和其他信号来决定品牌标识。仍然提供它的生成器已经过时。
  • showinfo在2018年被弃用,并已从文档中移除。
  • rel=0自2018年9月25日起已无法关闭相关视频,它只能让相关视频限于同一频道。
  • controls=2已被弃用,请使用0或1。

嵌入失效时的排查

  • 错误153或播放器空白。YouTube要求嵌入内容通过HTTP Referer头标明所在的网站,并建议使用strict-origin-when-cross-origin引荐来源政策。生成的代码已经设置了这个政策;如果你的网站全局发送no-referrer,播放器可能会失败。
  • “视频不可用”。可能是所有者关闭了该视频的嵌入功能,或者它是私享的、已删除的,或在访客所在的国家或地区被屏蔽。只有所有者才能更改这一点。
  • 播放器被截断或很小。某个父元素设置了固定高度或overflow: hidden,把它裁剪了;开启“自适应”后,请给容器设置宽度,让高度自动跟随。
  • 循环不重复。对于单个视频,网址里必须包含playlist=并且值是同一个视频ID,请直接复制生成的代码,而不是手动加上loop=1。

相关的YouTube工具

用YouTube字幕提取工具找到合适的开始位置,用章节生成器为较长的嵌入视频添加章节,或者用缩略图下载器下载自定义的封面图。要嵌入整门课程吗?播放列表时长计算器可以告诉访客它一共多长。

常见问题解答

如何嵌入一个从指定时间开始播放的YouTube视频?

在生成器里输入开始时间(可以是秒数、M:SS、H:MM:SS或1m30s的格式),然后复制代码。它会以秒为单位把start参数加到嵌入网址里,这正是YouTube播放器需要的格式。如果你粘贴的链接本身带有t=时间戳,开始时间会自动填好。

为什么我嵌入的YouTube视频无法自动播放?

大多数浏览器会阻止在访客与页面互动之前就带声音播放的视频。YouTube的开发者文档把没有用户交互的非静音播放列为浏览器会阻止的情形之一。请使用“静音自动播放(JavaScript API)”这种输出方式,它会让播放器以静音状态开始播放。

如何让YouTube嵌入内容自适应屏幕?

保持“自适应”开启即可。代码会把播放器设为占满容器的宽度,并用CSS的aspect-ratio属性保持16:9(Shorts则是9:16)的比例,这样不需要额外的包裹元素技巧,也能在各种屏幕上正确缩放。

隐私增强模式有什么作用?

它会把嵌入切换到youtube-nocookie.com域名。根据YouTube帮助中心的说明,这样观看嵌入的视频不会影响访客的YouTube浏览体验,也不会用来个性化你网站之外向访客展示的广告。但它并不意味着嵌入内容完全没有跟踪,所以请仍然在你的隐私政策里说明。

如何让单个YouTube视频循环播放?

勾选“循环播放”。对于单个视频,YouTube除了要求loop=1,还要求把playlist参数设为同一个视频ID,生成器会替你把两者都加上。

能隐藏视频结束时的相关视频吗?

不能完全隐藏。自2018年9月起,rel=0不再隐藏相关视频,而是把它们限制为同一频道的视频。生成器中的“仅推荐同一频道的视频”选项设置的就是这个。

可以嵌入播放列表吗?

可以。粘贴播放列表链接(包含list=)即可,生成器会生成播放列表嵌入代码;如果你的链接同时指向其中某个具体视频,播放器会从那个视频开始播放。

← 免费工具

首页 · Marqly