Embed Bilibili Video To HTML

Introduction

Bilibili has provided us the HTML video embedding code for most of its videos. However, the code Bilibili provided is not responsive and mobile friendly.

In this blog post, I would like to quickly talk about how to embed Bilibili video to HTML in a responsive fashion.

Non-Responsive

The default video embedding code that Bilibili provided is not responsive on mobile devices because the iframe height is fixed.

<iframe src="//player.bilibili.com/player.html?aid=815462670&bvid=BV1hG4y1z7Cu&cid=829156678&page=3&high_quality=1&autoplay=false" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width:100%; height:600px"> </iframe>

Responsive

With the following settings, the video embedding code becomes responsive on mobile devices.

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=815462670&bvid=BV1hG4y1z7Cu&cid=829156678&page=3&high_quality=1&autoplay=false" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
</div>

Other Options

There are some other options which might be useful in some use cases.

Key	Explanation	Value
as_wide	Wide screen.	1: Enabled. 0: Disabled
danmaku	Danmaku.	1: Enabled (default). 0: Disabled.

References

• 关于博客园内嵌入Bilibili视频
• 网站嵌入Bilibili视频的一些总结