網站引入iframe視頻，如何實現高度自適應？

我想很多小夥伴在寫博客的時候都能遇到一個令人頭疼的問題，某一篇文章想用 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