html - 带有 Bootstrap 的完全响应式视频

Question

我正在设计一个包含视频和图像的全屏响应式网站。这意味着该网站永远不会大于您的屏幕尺寸。我正在使用 Bootstrap 3 来设计它；我对图像没有任何问题，但我对视频有很多问题。我正在使用 Bootstrap 的标准响应式视频嵌入:

<div class="col-sm-12 col-md-12 col-full-parent">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="http://www.youtube.com/embed/..."></iframe>
    </div>
</div>

问题是，如果您更改宽度，它会调整大小，但如果您更改高度，则不会。

关于如何解决这个问题有什么想法吗？

编辑:父 col 容器是它应该达到的最大高度和宽度，但它不适合它。

Answer 1

我最终找到了解决方案，不使用 css 而只使用 javascript。它正好适合视频 iframe (#iframe_youtube) 在他的父 div (#main_container) 中以 16:9 的比例尽可能大

$( document ).ready(function() {
    resizeVideo();
} );

$(window).resize(function() {
    resizeVideo();
});

function resizeVideo() {
    var content = $('#main_container');
    var iframe = $('#iframe_youtube');

    var contentH = content.height();
    var contentW = content.width();
    var resH = (contentW * 9)/ 16;
    var resW = (contentH * 16)/ 9;

    if(contentH < resH) {
        resH = contentH;
    }
    if(contentW < resW){
        resW = contentW;
    }

    iframe.css('height',resH);
    iframe.css('width',resW);
}