幅と高さの両方で最大100％を使用してビデオ縦横比を維持する

Question

埋め込みコードを「ポップアップ」で使用してYouTubeビデオを統合したいと考えています。

私の問題は、ビデオがその親の高さに制約されないということです。私はそれがビデオを含むdiv＃ポップアップよりも高くならないようにしたい。今は親の身長を超えていても、できるだけ幅が広く、縦横比を高く保ちます。私が望むのは、ビデオが親のパディングまたはマージン内でできるだけ大きくなるようにし、それを中央に保ち、アスペクト比を維持することです（16：9）。

jQueryを使用したくない場合は、javascriptをオプションにすることもできます。

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#pop-up{ 
 
    width:100%; 
 
    height:100vh; 
 
    padding:5%; 
 
    box-sizing: border-box; 
 
    background:rgba(0,0,0,0.2); 
 
}

<div id="pop-up"> 
 
    <!--Youtube embed code--> 
 
    <div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div> 
 
</div>

ここで私はvisualy何をしたいの例です：コンピュータや景観電話のような広いブラウザで

：

肖像画のような背の高いブラウザで携帯電話またはタブレット：

Answer 1

だからここソリューションは、メディアクエリを使用することです：

あなたは以下を参照してくださいことができるように、それはあなたがあることを尋ねた方法です私のポップアップは全体のウインドウをカバーしているので、ウィンドウのアスペクト比を監視する最初の場所にサイズのws。次に、高さ100％の正しいアスペクト比（16px x 9px）の画像を使用して、ブラウザの能力を活用するためには、画像の幅を高さに合わせて適切な比率に保つ必要がありました。インラインブロックを使用して画像のサイズと位置を取得します。top 0 right 0 bottom 0 left 0トリックを使用して、親のサイズをビデオコンテナに適用します。

これは、子要素のサイズ変更やウィンドウのサイズ変更で幅が自動的に更新されるため、verryの単純なjavascript行を使用して、完了後に自動的に幅の自動削除と再適用が行われますサイズ変更。

私は中心のビデオのアイデアをあきらめましたが、代わりに残りのスペースを使用していくつかのコンテンツを追加します。

var rtime; 
 
var timeout = false; 
 
var delta = 200; 
 
window.onresize = function(){ 
 
    rtime = new Date(); 
 
    if (timeout === false) { 
 
     timeout = true; 
 
     setTimeout(resizeend, delta); 
 
    } 
 
}; 
 

 
function resizeend() { 
 
    if (new Date() - rtime < delta) { 
 
     setTimeout(resizeend, delta); 
 
    } else { 
 
     timeout = false; 
 
     if(window.innerWidth/window.innerHeight>16/10){ 
 
      document.getElementById("videoWrapper").style.width="0"; 
 
      setTimeout(function(){ 
 
      document.getElementById("videoWrapper").style.width="auto"; 
 
      },100) 
 
     } 
 
    }    
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#pop-up { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 5%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    position: absolute; 
 
} 
 
#videoWrapper { 
 
    width:100%; 
 
    position:relative; 
 
    height:0; 
 
    padding-bottom:56.25%; 
 
    width:100%; 
 
} 
 
@media all and (min-aspect-ratio: 16/10) { 
 
    #videoWrapper { 
 
    height:100%; 
 
    position:relative; 
 
    padding-bottom:0; 
 
    display:inline-block; 
 
    width:auto; 
 
    } 
 
    #videoWrapper img{ 
 
    height:100%; 
 
    } 
 
}

<div id="pop-up"> 
 
    <div id="videoWrapper"> 
 
    <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" frameborder="0" allowfullscreen style="position:absolute;width:100%;height:100%;left:0"></iframe> 
 
    <img src="http://jaunemoutarde.ca/denique/4/images/16x9_aspect_ratio.png" alt="" /> 
 
    </div> 
 
</div>

Answer 2

Iあなたのスタイリングにいくつかの変更を加えました。

これが機能するかどうかを確認してください。

@media (max-width: 1024px) { 
 
    body #pop-up iframe { 
 
    max-height: 34.6vh; 
 
    } 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#pop-up { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 5%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#pop-up iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 1024px; 
 
    max-height: 576px; 
 
}

<div id="pop-up"> 
 
    <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe> 
 
</div>