Hexo插入响应式Bilibili视频代码块

发表于 更新于 分类于 阅读次数：
本文字数： 1.1k 阅读时长 ≈ 1 分钟
本文将介绍如何更改站点同款鼠标样式

前言

本文将介绍如何在Hexo页面中插入响应式Bilibili视频代码块。

教程链接：如何在Hugo/Hexo博客中插入响应式Bilibili视频代码块_知识星海-CSDN博客

操作

  1. b站官方已经提供了iframe标签，有些小伙伴可能已经发现了。在网页打开b站视频页时，鼠标移至分享按钮，就可以复制。

  2. 只需要在页面中复制该代码即可。

    1
    <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样式：

      1
      style="position:absolute; height: 100%; width: 100%;"

    • 在标签外侧再嵌套一个div标签

      1
      2
      <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
      </div>

  4. 所以最后摆放一个完整的代码：

    1
    2
    3
    <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>

    效果如下：

后记

还是比较简单的，可以分享一些视频元素。

相关文章