前端笔记

包括模块、常见问题、css效果、js效果等。仅用于方便查找,提高工作效率。

网页插入iframe视频自适应宽高的方法

通常生成iframe视频代码是有个固定的宽高的,比如

<iframe width="560" height="315" src="https://www.youtube.com/embed/dnx3CEr3TG8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

如果直接改 width=”100%” height=”auto”,或者 width=”100%” height=”100%”都是不行的,要么宽度大了,高度没变,要么就是很大了变形了。

发现了一个好的方法,下次可以直接抄了

<style>
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 800px;
max-height: 450px;
margin:0 auto;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

把iframe代码放进一个叫video的div里面就ok。最大宽度和最大高度可按需要按比例修改。



打赏作者: 一分也是爱


您的支持就是我最大的动力
点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注