WordPress插入哔哩哔哩或YouTube视频

前言

这里主要简单记录下一下WordPress页面中插入哔哩哔哩（bilibili）和YouTube视频，且全屏铺满，也不自动播放。

记录于此，方便自己查阅。

正文

哔哩哔哩

打开B站视频，下面有个分享按键，点击后，出现一个弹框，里面最右边有【嵌入代码】，点击这个提示赋值代码成功。

修改前

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114673647165130&bvid=BV1RwMuzHEnV&cid=30467032510&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

修改后

主要有如下修改

1. 全屏铺满页面

2. 不自动播放，默认分析的会自动播放。

全屏css代码

style="width:100%; height: 500px; max-width: 100%;align:center; padding:20px 0;"

不自动播放代码

# 自动播放
src="//player.bilibili.com/player.html?isOutside=true&aid=114673647165130&bvid=BV1RwMuzHEnV&cid=30467032510&p=1"
# 不自动播放 
src="//player.bilibili.com/player.html?isOutside=true&aid=114673647165130&bvid=BV1RwMuzHEnV&cid=30467032510&p=1&autoplay=0"

就新增了

&autoplay=0

完整代码如下

<iframe style="width:100%; height: 500px; max-width: 100%;align:center; padding:20px 0;" src="//player.bilibili.com/player.html?isOutside=true&aid=114673647165130&bvid=BV1RwMuzHEnV&cid=30467032510&p=1" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

效果

效果为自动播放。不需要自动播放自己按照上面设置。

YouTube

这个也是分B站一样，点击分享弹出分享框，第一个有【嵌入】，点击它即可，然后会让你配置。

修改前

<iframe width="560" height="315" src="https://www.youtube.com/embed/CgEvJfN4tj4?si=S-ogVXtl7Yb_VPEK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

修改后

YouTube本身就是不自动播放的，这里只需要附上上面样式全屏铺满即可。

<iframe style="width:100%; height: 500px; max-width: 100%;align:center; padding:20px 0;" width="560" height="315" src="https://www.youtube.com/embed/CgEvJfN4tj4?si=V2xSsM8YEEfR_sNf&start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

效果

参考文章

1. 《WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放》

2. 《wordpress文中插入视频怎么实现？ – 知乎》