Question

我正在使用模态窗口来播放视频文件。 modal-body宽度小于约500 px;模态窗口显示为水平居中，但在其上方，它向右增长，因此在900px时，它从右侧的窗口掉落。有办法解决这个问题吗？视频总是被模态窗口完美地构成，它只是模态窗口，从左到右我无法居中。

另外，我想设置embed-responsive-16by9 max-width属性以防止它增长到特定大小以上，但要响应低于该大小的浏览器窗口。这可能吗？

通常情况下，我会使用Bootstrap 3.3.6 <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>来获得响应式解决方案，但这仅适用于16x9宽高比，而我所展示的视频是奇数球宽高比。不知道怎么做。

{{1}}

Answer 1

试试这个：

 <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上工作，因为modal-body带有样式显示：table不能使它的高度适合内容

添加以下脚本以使其适用于所有浏览器：

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

Answer 2

通过反复试验，我发现以下内容适用于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>

HTML CSS：包含iframe的水平中心浏览器模态窗口如何？

2 个答案: