WordPress 接入 B 站 iframe 视频

前言：

在写博客文章的过程中想要在页面中嵌入一些视频直接播放，对比了各种视频网站, 发现各种广告和限制什么的, 体验都不不是很好.
选来选去, 还是 B 站要好一些。

下面介绍一下 B 站调用播放器播放视频的链接以及参数 。

B 站播放器的链接参数：

https://player.bilibili.com/player.html?bvid=BV1yv411e733&page=1&as_wide=1&high_quality=1&danmaku=0&t=0

下面的代码除了正常播放视频还加了阻止自动跳转 B 站以及默认选择最高画质 （未登录最高 480p） 的功能。

接入 B 站 iframe 视频所需要的代码：

在 WordPress 文章中添加一个自定义 html 区块复制代码并修改与视频对应 BV 号即可。

<!-- Bilibili 视频播放器嵌入代码 -->
<iframe 
    id="bilibili_player" 
    src="//player.bilibili.com/player.html?bvid=BV1yv411e733&page=1&as_wide=1&high_quality=1&danmaku=0" 
    allowfullscreen="allowfullscreen" 
    width="100%"  
    scrolling="no" 
    frameborder="0" 
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
</iframe>

<!-- JavaScript: 根据宽度动态调整播放器高度 -->
<script type="text/javascript">
    var player = document.getElementById("bilibili_player");
    // 设置宽高比为 16:9，动态调整高度
    //var aspectRatio = 9 / 16;
    // 设置宽高比为 4:3，动态调整高度
    var aspectRatio = 3 / 4;
    // 获取容器宽度
    var playerWidth = player.scrollWidth;
    // 计算动态高度
    var newHeight = playerWidth * aspectRatio;
    // 限制最小高度为 300px，最大高度为 800px
    newHeight = Math.min(Math.max(newHeight, 300), 800);
    player.style.height = newHeight + "px";
</script>

使用上述自定义代码接入 B 站 iframe 视频的实际效果：

2025 极简代码

逛博客的过程中发现缙哥哥这里发现了一个更加简洁的 iframe 嵌入 B 站视频代码于是我也更新一下

<!-- Bilibili 视频播放器嵌入代码 (黑板模式播放器) -->
<iframe 
    src="//bilibili.com/blackboard/html5mobileplayer.html?bvid=BV1yv411e733&cid=27468235458&p=1&share_source=copy_web&danmaku=0" 
    width="100%"  <!-- 设置宽度为 100% -->
    height="500"  <!-- 设置固定高度 -->
    scrolling="no"  <!-- 禁止滚动 -->
    border="0"  <!-- 去除边框 -->
    frameborder="no"  <!-- 去除框架边界 -->
    framespacing="0"  <!-- 去除框架间距 -->
    allowfullscreen="true">  <!-- 允许全屏 -->
</iframe>

<style>
    /* 使用 CSS 来保持播放器的宽高比，确保响应式布局 */
    iframe {
        max-width: 100%;
        height: auto;  /* 自动调整高度 */
        aspect-ratio: 16/9;  /* 保持16:9宽高比 */
    }
</style>

参考链接：

网页 iframe 嵌入极简播放界面的 bilibili 视频-缙哥哥

登山亦有道 记录日常，每天进步一点点。 (chenyan98.cn)

接入 B 站 iframe 视频 (bilibili 引用视频)_不知名的上班族-老王-CSDN 博客