请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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

 
135465176.jpg

今天在发布文章的时候,需要在文章内嵌入一个B站视频,使用iframe代码后发现高度无法自适应,如果定义了iframe高度,在PC端是正常的,但是移动端的高度又不正常了,经过查阅很多资料,今天终于解决了这个问题。
解决办法如下:
1、增加CSS样式如下:
[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>


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。