我正在设计一个带有视频和图像的全屏响应式网站。这意味着该网站永远不会比您的屏幕尺寸大。我正在使用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/