HTML CSS：如何水平居中瀏覽器模式窗口包含iframe？

Question

我正在使用模式窗口來播放視頻文件。對於modal-body寬度小於約500像素;模態窗口顯示爲水平居中，但在此之上，它向右增長，這樣在900px的時候，窗口從右側的窗口掉下來。有什麼辦法解決這個問題？視頻總是被模態窗口完美地框住，它只是從左到右我無法居中的模態窗口。

此外，我想設置modal-body最大寬度屬性，以防止它增長超過一定的大小，但要響應低於該大小的瀏覽器窗口。這可能嗎？

通常情況下，我會使用Bootstrap 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"; 
}