Question

我正在创建一个全屏视频背景的网站。我希望它始终保持100％的高度，并删除所有不符合浏览器给出的宽高比的内容。我已经成功了，但现在我希望电影始终保持中心。

如何？

我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Video</title>

<style>
body{ margin:0px; background:#000; }
#bg_container{ height:100%; width:auto; }
#bg{ height:100%;}
</style>

</head>

<body>

<div id="bg_container">
<video id="bg" src="video/video.mp4" autoplay="true" loop="true" muted="true"></video>
</div>

</body>
</html>

Answer 1

您的代码在此处＆gt;＆gt;＆gt;＆gt;＆gt; Fullscreen center video background

将此链接添加到头

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<强> HTML

<video id = "video_background" preload = "auto" autoplay = "true" loop = "loop">
  <source src = "http://video-js.zencoder.com/oceans-clip.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;
}

<强>的javascript

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

调整大小时全屏背景保持中心

1 个答案: