我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题,某一篇文章想用 iframe 引入一个外链视频,但是大小总是有问题,宽度可以固定到 100% ,但是高度比如用实际高度来表示,比如 100px, 200px,诸如此类。

但是问题来了,在不同的页面宽度下,视频的高度是一致的,就会导致一个很麻烦的问题,

看下面两个图,

pc端

移动端

很明显,在pc端正常显示的视频,放到移动端高度就错位了,很不美观。

解决这个问题,可以同媒体查询,但是显然费时费力,还不那么完美。

其实很简单,只需要不到10行代码即可完美实现。

  1. 引入 jq ,(一般网站默认都有这个文件)
  2. 加上一段 js 代码,最好放在网站底部, </body> 前即可。
$('iframe').wrap('<p class="iframe"></p>')
  1. 在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://shuxhan.com/post/20210507.html