-11

子比主题嵌入哔哩哔哩视频的最佳方式

科技语者

4个月前更新

38010

该帖子部分内容已隐藏

此方法是我们日常嵌入B站视频时最直接的方式——复制平台的「内嵌代码」。尽管操作便捷，但其固有的不足也较为明显，例如默认的自动播放设置、生成的代码不够简洁等，这些都可能影响页面的加载效率与用户体验。

这是最直接的实现方式：从B站视频页面复制官方提供的「嵌入代码」。粘贴后，前端会渲染出如下播放器：

其对应的典型代码如下所示：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114284499571518&bvid=BV1e7RRYHELi&cid=29247079045&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

然而，通过优化后，在我自己的网站上呈现的播放器却十分简洁，并且成功避免了自动播放的问题。

优化后前端会渲染出如下播放器：

其对应的美化后的代码如下所示（替换方法也在里面）：

此处内容已隐藏，请付费后查看

本期教程到这里结束了，我们下期再见~

子比进阶玩法教程分享视频

-11

7人已评分

只看作者

最新最热

- 麦芽0
  抖音的视频怎么能嵌入到文章中
  3个月前河北回复
- 猫哥0
  大佬，为啥我用b站自动嵌入代码视频这么小？
  4个月前浙江回复
- 良辰美景一场梦0
  教程很好用，谢谢！
  4个月前湖北回复

xxxzzzz

我一直用这个


<div style="position: relative; width: 100%; padding-top: 56.25%; margin: 20px 0;">
<iframe src="https://www.zibll.top/wp-content/themes/zibll/img/thumbnail.svg" data-src="//player.bilibili.com/player.html?bvid=BV1yC5LzuEsX&page=1&danmaku=0&autoplay=0&disableAutoPlayback=1&as_wide=1"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px;"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        loading="lazy">
</iframe>
</div>

4个月前江苏