4
iframe嵌入哔哩哔哩Bilibili视频自适应高宽，兼容手机端
source link: https://www.lanka.cn/4682_4682.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
今天在发布文章的时候，需要在文章内嵌入一个B站视频，使用iframe代码后发现高度无法自适应，如果定义了iframe高度，在PC端是正常的，但是移动端的高度又不正常了，经过查阅很多资料，今天终于解决了这个问题。
解决办法如下：
1、增加CSS样式如下：
.meta-media {
position: relative;
margin-bottom: 30px;
float: left;
width: 100%;
height: 0;
padding-bottom: 75%;}.video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;}2、给iframe加class 为video,如下：
<iframe src="//player.bilibili.com/player.html?aid=985946126&bvid=BV1ft4y1c7CH&cid=847343270&page=1" frameborder="no" class="video" allowfullscreen="true"> </iframe>
这样两步就解决了，做个记录以备需要的时候查阅。
「打赏名单」
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK