HTMLのiframe要素のアスペクト比の設定方法

CSSを使用した方法: CSSのpaddingトリックを使用して、アスペクト比を指定します。以下のコード例では、アスペクト比が16:9（横幅を高さで割った値）に設定されています。

<div class="wrapper">
 <iframe src="https://example.com"></iframe>
</div>
<style>
 .wrapper {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%; /* アスペクト比 16:9 */
 }
 iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
</style>

JavaScriptを使用した方法: JavaScriptを使用して、iframeの高さを計算して設定する方法です。以下のコード例では、ウィンドウの幅に応じてアスペクト比を保持したまま、iframeの高さを調整します。

<div id="wrapper">
 <iframe src="https://example.com"></iframe>
</div>
<script>
 function resizeIframe() {
   var wrapper = document.getElementById("wrapper");
   var iframe = wrapper.querySelector("iframe");
   var aspectRatio = 16 / 9; // アスペクト比 16:9
   var width = wrapper.offsetWidth;
   var height = width / aspectRatio;
   iframe.style.height = height + "px";
 }
 window.addEventListener("resize", resizeIframe);
 resizeIframe(); // 初回読み込み時にも実行する
</script>

以上の方法は、アスペクト比を維持しながら、iframeをレスポンシブに表示するための一般的な手法です。必要に応じて、アスペクト比やコンテナのサイズを変更することができます。これらのコード例を使用して、自分のプロジェクトに適用してみてください。