Hexo插入响应式Bilibili视频代码块
前言
本文将介绍如何在Hexo页面中插入响应式Bilibili视频代码块。
操作
1.b站官方已经提供了iframe标签，有些小伙伴可能已经发现了。在网页打开b站视频页时，鼠标移至分享按钮，就可以复制。
2.只需要在页面中复制该代码即可。
<iframe src="//player.bilibili.com/player.html?aid=206890880&bvid=BV1Ah411z7Po&cid=378344365&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>3.但是为了在页面上获得更好的显示效果
- 我们可以在该标签中添加一个css样式：
style="position:absolute; height: 100%; width: 100%;"- 在标签外侧再嵌套一个div标签
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
</div>4.所以最后摆放一个完整的代码：
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=206890880&bvid=BV1Ah411z7Po&cid=378344365&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position:absolute; height: 100%; width: 100%;"> </iframe>
</div>后记
还是比较简单的，可以分享一些视频元素。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-07-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
