アスペクト比を想定せずにiframeを応答させる方法は？

アスペクト比を想定せずにiframeをレスポンシブにする方法は？たとえば、コンテンツには幅や高さがあり、レンダリング前は不明です。

JavaScriptを使用できることに注意してください。

例：

<div id="iframe-container">
    <iframe/>
</div>

サイズiframe-containerそのため、コンテンツが余分なスペースなしで内部にかろうじて収まるように、つまり、コンテンツをスクロールすることなく表示できるように十分なスペースがありますが、余分なスペースはありません。コンテナはiframeを完全にラップします。

これは、コンテンツのアスペクト比が16：9であると仮定して、iframeをレスポンシブにする方法を示しています。しかし、この質問では、アスペクト比は可変です。

javascripthtmlcssiframeresponsive-design

2020/04/24ferit

私の解決策は GitHub および JSFiddle にあります。

アスペクト比を想定せずにレスポンシブiframeのソリューションを提示します。

目標は、必要に応じて、つまりウィンドウのサイズが変更されたときに、iframeのサイズを変更することです。これはJavaScriptで実行され、結果として新しいウィンドウサイズを取得し、iframeのサイズを変更します。

注意：ページのロード後にウィンドウ自体のサイズが変更されることはないため、ページのロード後にサイズ変更関数を呼び出すことを忘れないでください。

コード

index.html

<!DOCTYPE html>
<!-- Onyr for StackOverflow -->

<html>

<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Responsive Iframe</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body id="page_body">
    <h1>Responsive iframe</h1>

    <div id="video_wrapper">
        <iframe id="iframe" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
    </div>

    <p> 
        Presenting a solution for responsive iframe without aspect
        ratio assumption.<br><br>
    </p>

    <script src="./main.js"></script>
</body>

</html>

style.css

html {
    height: 100%;
    max-height: 1000px;
}

body {
    background-color: #44474a;
    color: white;
    margin: 0;
    padding: 0;
}

#videoWrapper {
    position: relative;
    padding-top: 25px;
    padding-bottom: 100px;
    height: 0;
    margin: 10;
}
#iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

main.js

let videoWrapper = document.getElementById("video_wrapper");

let w;
let h;
let bodyWidth;
let bodyHeight;

// get window size and resize the iframe
function resizeIframeWrapper() {
    w = window.innerWidth;
    h = window.innerHeight;

    videoWrapper.style["width"] = `${w}px`;
    videoWrapper.style["height"] = `${h - 200}px`;
}

// call the resize function when windows is resized and after load
window.onload = resizeIframeWrapper;
window.onresize = resizeIframeWrapper;

私はこれに少し時間を費やしました。楽しんでいただければ幸いです=）

Editこれはおそらく最も一般的なソリューションです。ただし、非常に小さくすると、iframeに適切なサイズが与えられません。これは、使用しているiframeに固有です。 iframeのコードがなければ、この現象に適切な答えをコーディングすることはできません。コードには、iframeが適切に表示するために優先するサイズを知る方法がないためです。

@Christos Lytrasによって提示されたような一部のハックだけがトリックを作成できますが、すべてのiframeで機能することは決してありません。特定の状況でのみ。

2020/04/27Onyr