avatar

目录
Hexo插入Bilibili视频自适应

前言

在Hexo插入Bilibili视频的时候,发现视频的播放器大小好小,于是决定解决一番。

原版分享视频

Bilibili分享视频

html
<iframe src="//player.bilibili.com/player.html?aid=47115841&cid=82509825&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接将B站中的视频插入地址放入文章MarkDown中的效果如下:

这个视频也太小了,而且不能全屏,很难受,于是在网上看到有人用自定义调节视频的高宽。

自适应视频播放器

html
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=55224540&cid=96981660&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"> </iframe>
</div>

只需要在分享复制的代码外层添加这一层 div 就好了,最后效果如下:

手机上也能很好的自适应噢

本文中的自适应解决方案来自这篇 文章,里面还介绍了其他音视频平台插入的方法,在这里也谢谢这位老哥了。


to be continued…

文章作者: Tamsiree
文章链接: https://tamsiree.com/TechnicalResearch/Hexo/Hexo%E6%8F%92%E5%85%A5Bilibili%E8%A7%86%E9%A2%91%E8%87%AA%E9%80%82%E5%BA%94/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tamsiree
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论