WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小

添加css,适配网页宽度100%

  • 主题设置自定义css中
  • 添加到主题style.css文件中
  • 或者加入WordPress后台-外观-自定义-额外css中

三个方法选择其中一个就可以,添加过后要是没有生效,就切换方法添加css

.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
}
 
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
  • 例如方法三
    WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小

哔哩哔哩视频代码获取与插入

  • 获取bilibli视频代码,找个视频点击分享-嵌入代码

WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小

  • 获取的代码
<iframe src="//player.bilibili.com/player.html?aid=244579875&bvid=BV1Xv41117Ah&cid=236078872&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  • 用一个<div class=”aspect-ratio”></div>元素包起来,例如
<div class="aspect-ratio">
<iframe src="//player.bilibili.com/player.html?aid=244579875&bvid=BV1Xv41117Ah&cid=236078872&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
  • 插入代码-编辑器切换到文本,如果是古腾堡编辑器,要插入html模块

WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小

  • 插入后的效果

WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

亲测网络 建站教程 WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小 https://www.qincewangluo.com/1249.html

这个人很懒,什么都没有留下~

常见问题
  • 手机用户购买:微信支付用户需要在微信内打开,或者截图付款码进行付款,支付宝可以直接跳转。电脑用户可正常直接扫码,如付款完等待无跳转,返回资源页刷新下。
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

WordPress 引用插入 哔哩哔哩(bilibli)高清视频并自动适配大小-海报

分享本文封面