在网页中嵌入B站视频

张中魁 / 2022-07-17

偶然发现B站分享按钮下面有一个嵌入代码，就尝试了一下在我的博客内嵌入视频，效果还不错呢,以下视频就是从B站嵌入的。

利用hugo的shortcode实现

在layouts/shortcode,文件夹下，新建一段代码bilibili.html，如下：

<style>
.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    }
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }
</style>


<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid={{ index .Params 0 }}&&page=1&as_wide=1&high_quality=1&danmaku=0"
    scrolling="no"
    border="0"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true">
    </iframe>
</div>

然后在需要插入视频的.md文档里插入{{% bilibili 490903353 %}}，在构建页面的时候即可加入视频播放界面。