我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题,某一篇文章想用 iframe
引入一个外链视频,但是大小总是有问题,宽度可以固定到 100% ,但是高度比如用实际高度来表示,比如 100px
, 200px
,诸如此类。
但是问题来了,在不同的页面宽度下,视频的高度是一致的,就会导致一个很麻烦的问题,
看下面两个图,
pc 端
移动端
很明显,在 pc 端正常显示的视频,放到移动端高度就错位了,很不美观。
解决这个问题,可以同媒体查询,但是显然费时费力,还不那么完美。
其实很简单,只需要不到 10 行代码即可完美实现。
-
引入 jq,(一般网站默认都有这个文件)
-
加上一段 js 代码,最好放在网站底部,
</body>
前即可。
$('iframe').wrap('<p class="iframe"></p>')
- 在 css 文件的底部加上:
.iframe{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这个时候再访问带有 iframe 视频的网页,不管宽度如何变化,高度可以随视频自适应。
例如这个网页,可以看一下效果:https://imhan.cn/posts/20210507.html