HTML CSS：iframeを含むブラウザの水平モーダルウィンドウをどのように中央に配置しますか？

Question

私はモーダルウィンドウを使ってビデオファイルを再生しています。 modal-bodyの幅は約500ピクセル未満です。モーダルウィンドウは水平に中央に表示されますが、その上には右に拡大されるので、900pxで右側のウィンドウからはみ出してしまいます。それを修正する方法はありますか？ビデオは常にモーダルウィンドウによって完全に囲まれています。モーダルウィンドウは左から右に中央に配置できません。

また、modal-bodyのmax-widthプロパティを設定して、特定のサイズを超えて拡大しないようにしたいが、そのサイズ以下のブラウザウィンドウに反応するようにしたい。これは可能ですか？

通常、私はブートストラップ3.3.6 embed-responsive-16by9を使用して応答性の高いソリューションを提供しますが、これは16x9のアスペクト比でのみ機能し、私が表示しているビデオは奇妙なアスペクト比です。他にどのようにそれを行うか分からない。

<div class="modal fade" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body" style="width: 900px; margin: 0 auto; padding: 0px;"> 
       <div align="center" style="width: 100%; height: 0; 
            padding-bottom: 64.5%; position: relative; margin: 0px; 
            padding-top: 0px; padding-left: 0px; padding-right: 0 px;"> 
        <iframe style="position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%; 
            margin: 0px; padding: 0px;" 
            src="" frameborder="0" 
            allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

試行錯誤で、私はFirefox、Chrome、Safariで次の作品を見つける。これは、任意のアスペクト比のYouTube動画を表示するためのモーダルウィンドウに対応しています。モーダルウィンドウの幅は、ウィンドウに余裕があっても969pxより大きくならない。私はこれが現代のブラウザでもうまくいくと思っているかどうか、私は何かコメントをいただきたいと思います。

<div class="modal fade" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog" 
     style="width: 100%; max-width: 969px;"> 
     <div class="modal-content"> 
      <div class="modal-body" style="margin: 0 auto; padding: 0px;"> 
       <div align="center" 
        style="width: 100%; height: 0; 
          padding-bottom: 64.5%; 
          position: relative;"> 
        <iframe style="position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;" 
         src="" frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

これを試してみてください：

<div class="modal fade" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body" style="width: 900px; margin: auto; padding: 0px;bottom: 0; right: 0; left: 0; top: 0; position: absolute; display: table"> 
       <div align="center" style="width: 100%; height: 0; 
            padding-bottom: 64.5%; position: relative; margin: 0px; 
            padding-top: 0px; padding-left: 0px; padding-right: 0 px; 
            "> 
        <iframe style="position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%; 
            margin: 0px; padding: 0px;" 
            src="https://www.youtube.com/embed/6YDQRo227hU" frameborder="0" 
            allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

しかし、このコードは、Firefox上でウォーキングない、スタイルの表示とモーダル・ボディので：表がそれの高さフィット内容

を作るために、スクリプトの下に追加しませんそれはすべてのブラウザで動作します：

var mds = document.querySelectorAll(".modal-body"); 
for (var i = 0; i < mds.length; i++) { 
    mds[i].style.height = mds[i].children[0].offsetHeight + "px"; 
}