网站引入 iframe 视频，如何实现高度自适应？

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

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

看下面两个图，

pc 端

移动端

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

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

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

1. 引入 jq，（一般网站默认都有这个文件）

2. 加上一段 js 代码，最好放在网站底部， </body> 前即可。

$('iframe').wrap('<p class="iframe"></p>')

3. 在 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

• LinuxDo
• Giscus
• Twikoo