当前位置:

iframe嵌入哔哩哔哩Bilibili视频自适应高宽,兼容手机端

xiaoming 2022-12-20 186 0

iframe嵌入哔哩哔哩Bilibili视频自适应高宽,兼容手机端插图

今天在发布文章的时候,需要在文章内嵌入一个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>

这样两步就解决了,做个记录以备需要的时候查阅。


发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~
您是本站第219名访客 今日有1篇新文章