我有一个在网页上播放的背景视频,还有这个 CSS;
#video_background {
position: fixed;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
z-index: -1000;
overflow: hidden;
}
.. 保持居中,就像我希望的那样,但它保持浏览器窗口内的所有边缘,而不是总是全出血。我正在尝试复制该网站正在做的事情;
该站点似乎有两套规则,一套针对包含视频的 div,另一套针对视频本身。有人可以向我解释为什么这行得通而我在做什么却行不通吗?是否还有 js 致力于使链接网站上的视频居中?
最佳答案
是的,查看您链接到的网站源代码中的video_background.js
,特别是$(window).resize
函数:
$(window).resize(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var width;
var height;
//size
width = windowWidth;
height = width*formH/formW;
if(height<windowHeight){
height = windowHeight;
width = formW*height/formH;
}
$div_holder.css("width", width);
$div_holder.css("height", height);
$div_holder.css("left", windowWidth/2-width/2);
$div_holder.css("top", windowHeight/2-height/2);
});
Left 和 top 是根据 windowWidth
和 (video) width
定义的,它使视频居中。
关于javascript - CSS保持背景视频居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17907516/