ウェブサイトにiframeビデオを導入する方法は、高さの自動調整を実現するにはどうすればよいですか？

多くの方がブログを書く際に、1 つの頭痛の種に直面することでしょう。ある記事で外部リンクのビデオをiframeで導入したいのですが、サイズが常に問題になります。幅は 100% に固定できますが、高さは実際の高さで表現したい場合、例えば100px、200pxなどです。

しかし、問題が発生します。異なるページ幅では、ビデオの高さが一致してしまい、非常に厄介な問題が発生します。

以下の 2 つの画像をご覧ください。

PC 版

モバイル版

明らかに、PC 版では正常に表示されるビデオが、モバイル版では高さがずれてしまい、見た目が悪くなります。

この問題を解決するためには、メディアクエリを使用することができますが、明らかに手間がかかり、完璧ではありません。

実際には非常に簡単で、わずか 10 行のコードで完璧に実現できます。

jq をインポートします（通常、ウェブサイトにはデフォルトでこのファイルがあります）。
以下の JavaScript コードを追加します。最適な場所は、ウェブサイトの末尾、</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