我正在设计一个带有视频和图像的全屏响应式网站。这意味着该网站永远不会比您的屏幕尺寸大。我正在使用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容器是应该达到的最大高度和宽度,但是不适合它。

最佳答案

我结束寻找解决方案,而不是使用CSS,而只是使用javascript。它恰好适合其父div(#main_container)中以16:9比例显示的视频iframe(#iframe_youtube)尽可能大

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

关于html - 带有Bootstrap的全响应视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31908920/

10-12 01:08
查看更多