收藏文章 楼主
论坛引用外链哔哩哔哩视频自适应
版块:站长交流区   类型:普通   作者:可乐   查看:434   回复:0   获赞:1   时间:2021-08-07 18:50:58

B站分享使用的的iframe,插入到网页会显得很小,我们给他外部添加一个.bilibili的div

<div class="bilibili">
<iframe src="//player.bilibili.com/player.html?aid=32565024&bvid=BV1rW411U7XN&cid=56983085&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

然后添加CSS样式

/*bilibili*/
    .bilibili {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 75%;
    }
    
    .bilibili iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

这样就可以实现自适应了。


学无止境! 
回复列表
默认   热门   正序   倒序

回复:论坛引用外链哔哩哔哩视频自适应

暂无用户组
退出
等级:0级
天豆:
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1940天豆仅需194元

终身个人版授权+3880天豆仅需388元

3年尊享版授权+13580天豆仅需1358元

终身尊享版授权+27160天豆仅需2716元

Powered by HadSky 7.8.7

©2015 - 2021 HadSky

购买产品 用户文档 加入QQ群 授权查询 网站绑定 客户案例 陕ICP备13005805号

您的IP:3.239.2.222,2021-10-26 01:45:41,Processed in 0.03809 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(1) 分享
分享

请保存二维码或复制链接进行分享

取消