WordPress 如何嵌入响应式 YouTube 影片

想要在 WordPress 上面播放影片，有 2 种方法。
第 1 种是直接上传影片档案，例如上传 MP4 的影片档。
第 2 种是将 Youtube 的影片嵌入在网页之中，使用这种方式有个好处是减少 WordPress 站台本身的流量频宽。

我知道有一些人架站时选择低费用的主机，网路频宽较小，流量也有限制，所以要放影片时，建议还是从 Youtube 平台上取得连结再嵌入网页之中就好。

当直接把 Youtube 影片嵌入在 WordPress 时，可能会遇到一个问题，有些布景主题没有写好 Youtube影片符合响应式网页，就会在手机上超出萤幕范围。

网页上的 Youtube 影片太大，左右两边超出画面了。

接下来我会分享如何从 Youtube 复制连结到 WordPress 上播放影片，并设定符合响应式(RWD)网页的自动缩放功能。

嵌入 Youtube 影片连结

先开启 Youtube 影片播放页面，在影片下面点击「分享」钮。

将分享连结复制下来。

在 WordPress 编辑页执行「新增媒体」。
选择左边的「从网址插入媒体」。再将刚刚复制的网址贴上即可。

完成这里，Youtube 影片就放入 WordPress 网页之中了喔。

这是电脑观看时的画面，影片左右有些画面超出范围了。
若在手机上观看时，超出萤幕范围就会更大。

此问题是因为没有设定影片符合响应式(RWD)网页缩放。

加入 CSS 响应式(RWD)影片缩放

加入 CSS 语法

点选「外观 > 自订」。

点击「附加的 CSS」。

加入以下 CSS 语法

.youtube-rwd {
    position: relative;
    padding-bottom: 56.25%;
}
 
.youtube-rwd iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

贴上後按「发布」。

设定 Youtube 连结设定

回到文章的编辑网页，刚刚加入影片连结後，点选「文字」(原始码功能)，可以看到原始语法。

使用「从网址插入媒体」嵌入 Youtube 连结都会变成这样的语法。

接下来就在语法的前面增加

後面增加

完成後的影片语法就变这样。

如果你是直接从 Youtube 复制分享连结的话，可以套用以下格式：

[ embed] 使用时要把(空格拿掉)

简单来说就是将 Youtube 复制好的连结，前面及後面增加一点语法就行了。

修改後，就可以重新测试一下我们的影片了。

电脑浏览时，就可以看到完整的画面。
在手机浏览时，也可以自动缩小影片。

修改方法说明

要在 CSS 上增加 youtube-rwd 设定是为了在 Youtube 影片外增加响应式缩放设定。
所以在 Youtube 贴上连结时，才需要特别加上 … 语法。

CSS 语法中的 padding-bottom: 56.25%;，是因为影片高度与宽度的比例 16:9 计算得来，9 除以 16 = 0.5625 换算高度比 0.5625=56.25%。

使用外挂解决响应式缩放

如果不熟悉 CSS 语法不敢乱修改的话，可以试试外挂解决喔。
可以安装外挂 Embed Plus for YouTube

安装启用後，在选单会增加「Youtube Free」功能，打开後在第 1 页的设定画面，下方找到「Responsive Video Sizing:」，将此功能打勾就可以了喔。

打勾之後，所有 Youtube 影片就会自动缩放了喔。

因为是免费的外挂，难免会有一些广告喔。

重点整理

1. 执行 Youtube 分享钮取得连结
2. 在 WordPress 按「从网址插入媒体」插入影片
3. 附加 CSS 使影片在手动上自动缩放
4. 影片 RWD 有使用 Embed Plus for YouTube 外挂解决

相关学习文章

WordPress 点击图片放大效果-Easy FancyBox 外挂教学
WordPress 修改主题样式 (style.css) - 常用 4 招教学