中心全屏背景视频 [英] center fullscreen background video
问题描述
我最近的HTML5发挥四周,遇到了主意,用
I recently played around with html5 and came across the idea to use
使用以下HTML的code全屏视频的网站'背景:
a fullscreen video as the websites' background using the following html-code:
<video id = "video_background" preload = "auto" autoplay = "true" loop = "loop">
<source src = "videos/football.mp4" type = "video/mp4" />
</video>
此外,我用下面的CSS- code以正确对齐:
Additionally, I used the following css-code to align it properly:
#video_background{
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
max-width: 4000%;
max-height:4000%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
它的工作pretty好,但我想有我的视频水平居中
在每一个浏览器的分辨率。
It's working pretty well, but I would like to have my video horizontally centered on every browser resolution.
不管我试图达到这样的效果(通过保证金或基于%定位)哪种方式,
视频不停地粘在右下角。
No matter which way I tried to achieve this effect (via margin or %-based positioning), the video kept stick to the right bottom.
如何解决这个问题任何想法?
Any ideas on how to resolve this "issue"?
推荐答案
下面是一个jQuery的功能,我写了一封长前阵子进行视频全屏背景。本质上,如果窗口的高宽比是比视频的纵横比越高则使高度为100%和宽度自动反之亦然为更大的宽高比的窗户。
Here's a JQuery function I wrote a long while back to make a video a fullscreen background. Essentially if the aspect ratio of the window is taller than the aspect ratio of the video then make the height 100% and width auto and vice-versa for wider aspect ratio windows.
// Resize the video elements so that we don't get any borders due to aspect ratio
function resizeVideo() {
if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9)
$("video").removeAttr("height").removeAttr("width").width("auto").height("100%");
}
else {
$("video").removeAttr("height").removeAttr("width").width("100%").height("auto");
}
};
// Add the resize function to the window resize event but put it on a short timer as to not call it too often
var resizeTimer;
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeVideo, 150);
});
这篇关于中心全屏背景视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!