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);
}

具有Bootstrap的完全响应视频

1 个答案: