中心全屏背景视频

时间:2013-08-06 21:12:47

标签: html css video background css-position

我最近玩过html5并且遇到了使用

的想法

使用以下html代码作为网站背景的全屏视频:

<video id = "video_background" preload = "auto" autoplay = "true" loop = "loop">
  <source src = "videos/football.mp4" type = "video/mp4" />
</video> 

此外,我使用以下css代码正确对齐它:

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

它工作得很好,但我想让我的视频水平居中 在每个浏览器分辨率上。

无论我尝试以哪种方式实现此效果(通过保证金或基于百分比的定位), 视频一直坚持到底部。

关于如何解决这个“问题”的任何想法?

1 个答案:

答案 0 :(得分:1)

这是一个JQuery函数,我写了很长一段时间才使视频成为全屏背景。基本上,如果窗口的纵横比高于视频的纵横比,则使高度100%和宽度自动,反之亦然,以获得更宽的宽高比窗口。

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