欢迎光临一流素材网,免积分免费素材下载!

网页插入iframe视频自适应宽高度实现方法

所属栏目:DIV+CSS技巧更新时间:2021-02-04 来源:网络 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

在网页中插入腾讯视频等平台的视频,都是iframe方式插入的,在响应式网页中,宽度一般是100%,但高度必须指定,否则无法正常显示,但如果指定高度,很显示达不到自适应的需求,特别是在手机上浏览,效果很差。

通过本教程实现iframe视频实现宽高度都自适应。

1、如下图所示代码结构

<div class="show-video">
<iframe class="video" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=a00229izdld&autoplay=true" allowFullScreen="true"></iframe>
</div>

2、CSS

.show-video {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.show-video .iframe-video {position: absolute; top: 0; left: 0; width: 100%;height: 100%;}


收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧
百度云加速250x250