前言
这里主要简单记录下一下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>
修改后
主要有如下修改
全屏铺满页面
不自动播放,默认分析的会自动播放。
全屏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>
效果
参考文章
《》
《
© 版权声明