WordPress页面怎么添加视频？古腾堡和Elementor两种方法完整教程
本站部分链接为联盟推广链接。通过这些链接购买，我可能获得佣金...
这不仅不会增加您的实际费用，通常还能让您享受到专属折扣。所有上榜推荐均基于真实项目环境下的自费实测，排名完全由客观测评数据决定。详细规则请查阅《免责声明》。
不要直接把视频文件上传到WordPress媒体库。
原因很直接，视频文件体积大，一个5分钟的1080p视频动辄几百MB，传到服务器上不但吃磁盘空间，每次访客播放还要消耗你的带宽，主机套餐的带宽用完了就开始额外计费，更别说对页面加载速度的影响了。正确的做法是把视频传到YouTube、Vimeo这类专业视频平台，然后在WordPress里嵌入播放器链接，访客流量走视频平台的服务器，跟你主机毫无关系。
如果你确实有私密视频、不适合放YouTube的内容，可以用Vimeo的私密模式，或者后面会提到的iFrame代码方案处理。
下面按古腾堡和Elementor分别讲。
古腾堡（Gutenberg）编辑器添加视频
方法一：直接粘贴URL，最快，一步搞定
这是这篇文章里所有方法里最省事的。
在古腾堡编辑器里，在你想要插入视频的位置，点击一个新段落块，把YouTube或Vimeo的视频URL直接粘贴进去，按回车确认，WordPress会自动识别这是视频链接，立刻把它转换成一个可播放的嵌入式视频播放器，不需要点任何其他按钮。
这个功能叫oEmbed，WordPress使用oEmbed技术，能自动识别YouTube、Vimeo等平台的链接，粘贴URL后立刻替换成完整功能的视频播放器，支持的平台不只YouTube和Vimeo，还包括TikTok、Twitter、Spotify等几十个主流内容平台。
一个小技巧：在新行里直接输入/youtube然后按回车，可以快速插入YouTube Block，不需要去搜索Block列表。同理，/vimeo会插入Vimeo Block，用了就停不下来的快捷方式。
方法二：YouTube/Vimeo专用Block，有更多控制选项
如果你想设置对齐方式、宽度比例、是否显示标题等选项，用专用的YouTube Block比直接粘贴URL更灵活。
操作步骤：
- 在编辑器里点击左上角或内容区的蓝色「+」号添加Block
- 搜索框里输入「YouTube」（或者「Vimeo」），选择对应的Block
- Block出现后，把YouTube视频的URL粘贴进输入框，点击「嵌入」按钮
- 视频嵌入后，在右侧设置面板可以选择对齐方式（居左/居中/居右）、是否全宽显示
视频嵌入后，点击YouTube Block会在编辑器顶部出现对齐和宽度调整按钮，可以设置居左、居中、居右，也可以设置宽幅（wide width）或全幅（full width）显示，适合想让视频撑满整个内容区宽度的情况。
方法三：本地视频上传（必须这么做的特殊场景）
前面说了不推荐把视频上传到服务器，但确实有少数场景绕不开——比如非常短的产品演示循环播放动画（几秒钟的MP4，文件只有几MB）、或者需要完全控制播放体验不想受平台限制。
这种情况用古腾堡的「视频」Block（搜索「Video」找到）：
- 点击「+」号添加Block，搜索「Video」，选择视频Block
- 点击「上传」从本地选择视频文件，或点击「媒体库」选择已上传的视频
- 视频上传后可以设置：是否自动播放（Autoplay）、是否显示控制栏（Controls）、是否静音（Muted）、是否循环播放（Loop）
- 建议同时上传一张「封面图」（Poster Image）：这张图会在视频加载之前显示，封面图作为不支持HTML5视频的设备的后备显示，也会在网速慢的情况下视频加载时显示，不设封面图的话视频加载前那块区域是空白的，体验不好
方法四：自定义HTML嵌入iFrame代码
YouTube和Vimeo都提供iFrame嵌入代码，这种方式适合需要自定义视频参数（比如指定开始时间、禁止相关推荐视频、隐藏YouTube logo等）的场景。
从YouTube视频页面点击「分享」→「嵌入」，复制弹窗里的iFrame代码，长这样：
html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/视频ID"
title="视频标题"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>在古腾堡编辑器里添加一个「自定义HTML」Block（搜索「HTML」），把iFrame代码粘贴进去，点「预览」确认效果，然后保存发布。
常用的YouTube URL参数（加在embed/视频ID后面）：
?start=60：从第60秒开始播放?rel=0：播放结束后不显示相关视频推荐?modestbranding=1：隐藏YouTube logo（不确定此参数在最新YouTube API中是否仍完全生效）?autoplay=1&mute=1：自动播放且静音（浏览器通常要求视频必须静音才能自动播放）
多个参数用&连接，比如?start=60&rel=0。
Elementor编辑器添加视频
Elementor提供了专用的视频组件（Video Widget），相比古腾堡的Block，它对自动播放、静音、自定义缩略图、懒加载等提供了更细粒度的控制，不需要写任何代码。
添加视频组件
进入Elementor编辑界面，在左侧组件搜索框里输入「视频」或「Video」，找到视频组件后把它拖拽到页面上你想要放置视频的位置。
组件添加之后，左侧设置面板会切换到视频组件的设置选项，分为三个标签页：内容（Content）、样式（Style）、高级（Advanced）。
内容（Content）标签页设置
视频来源（Source）：下拉选择视频平台——YouTube、Vimeo、DailyMotion，或者选择「自托管」使用你服务器上的视频文件，或者「外部URL」直接填入mp4链接。大多数情况选YouTube。
链接：填入YouTube视频的完整URL，Elementor会自动解析并显示视频预览。
开始时间 / 结束时间：可以精确到秒，让视频从指定位置开始播放或在指定位置停止，对于只想展示某个片段的场景很实用。
自动播放（Autoplay）：开启后访客进入页面时视频自动开始播放，配合下面的「静音（Mute）」一起用，因为现代浏览器要求自动播放的视频必须是静音状态。
循环播放（Loop）：视频播放完毕后从头循环，适合产品展示的背景视频效果。
显示控制栏（Player Controls）：关掉之后访客看不到播放/暂停按钮，适合纯装饰性背景视频。
隐私模式：YouTube视频开启后使用youtube-nocookie.com域名嵌入，访客不会被YouTube追踪cookie，对GDPR合规有帮助。
图像叠加层（Image Overlay），速度优化最重要的设置
这个选项藏在Content标签里，大多数教程没有专门讲，但对页面速度影响非常大。
开启「图像叠加层」后，视频区域会先显示一张你设置的封面缩略图，只有当访客点击这张缩略图时，视频播放器才真正加载。关闭叠加层的情况下，页面加载时YouTube播放器的所有JavaScript和资源会立刻开始加载，即使访客根本不打算看视频，这些资源也在消耗带宽和影响性能。
对于腾腾博客这类内容为主的站点，页面上嵌入视频的时候建议都开启图像叠加层，从YouTube视频页面截一张高质量封面图传上来，视觉效果和不加封面图差不多，但页面加载速度有明显改善。
样式（Style）标签页设置
这里可以设置视频组件的宽高比（16:9、9:16、4:3等常见比例），以及视频区域的边框圆角、阴影效果，还可以给叠加层的图片设置hover效果（鼠标悬停时改变透明度或显示播放按钮）。
宽高比：建议保持16:9，这是YouTube和大多数横向视频的标准比例，不设置的话有时候会出现视频上下有黑边或者比例变形的情况。
两种编辑器的选择建议
像腾腾博客这类文章为主的内容站，大多数时候在写文章，用的是古腾堡编辑器，直接粘贴YouTube URL是最快的方式，90%的视频嵌入需求这一步就够了；需要额外控制参数（开始时间、禁止相关视频）的时候用iFrame自定义HTML。
用Elementor搭建的页面（落地页、产品页、首页）遇到需要嵌入视频的情况，用Elementor的视频组件，原因是视觉编辑更直观，图像叠加层的速度优化功能也比古腾堡Block更方便配置，不需要自己写懒加载代码。
速度这块值得多说一句：每嵌入一个YouTube视频，即使访客不点播放，YouTube播放器加载时会从Google服务器拉取大量资源，对页面首次加载时间有实际影响，参考WordPress网站速度优化全攻略里讲到的第三方脚本影响这部分，了解完整的处理思路。Elementor的图像叠加层、古腾堡搭配FlyingPress的Lightweight YouTube Previews功能（前面FlyingPress使用教程里讲到过），都是解决这个问题的成熟方案，对PageSpeed实测分数有直接帮助。
