如何使网站的背景视频响应

Question

HTML：

<div id="video">
    <video autoplay loop class="video">
        <source src="books.mp4" type="video/mp4">
    </video>
</div>
<section id="meat">
    <P>
        <span class="name">  xxxxxx</span>
        <br/>
        <span class="surname"> xxxxx </span>
    </P>
</section>

.CSS：

.video{
    position: fixed; no-repeat;
    top: 50%; left: 50%;
    z-index:-1000;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

如何使视频和内容具有响应性？CSS，Bootstrap或js任何代码都是有帮助的。谢谢。

Answer 1

虽然你的问题是有效的。但你的方法不是。我已经开发了这个，但在移动设备中加载视频需要时间。因此，您需要在大屏幕的背景中显示视频，在小屏幕中显示背景图像。这可以使用Jquery来完成。

$(window).resize(function(){
            var width = $("body").width();
            if(width <= 1024){
                $("#media_div").html("<img src='media/images/bg_result.jpg' class='media'/>");                   
            }else{
                $("#media_div").html('<video src="media/video/video.mp4" autoplay="true" mute loop class="media"/>');
                $("#media_div img").css("height","auto");
            }
        });

只需制作一个容器并给它一个 ID "media_div"。然后编写这个 Jquery 代码。您还需要在文档就绪事件上执行此操作。因为当第一次加载页面时，不会触发"调整大小"事件。这将使您的代码完全响应，即使有人试图在大屏幕上更改浏览器宽度。分析此代码。想。理解。法典。岩石

Answer 2

如果您希望视频始终等于屏幕尺寸，我会像这样解决：

.HTML：

<div id="video">
    <video autoplay loop class="video">
        <source src="books.mp4" type="video/mp4">
    </video>
</div>

.CSS：

video { object-fit: fill; }
#video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

现场演示：JSFiddle
(这里的代码片段有点没用(
您可以查看上面的演示并调整窗口大小。

包含

视频内容的演示：JSFiddle

你也没有关闭你的div.

Answer 3

以下是我在保持所有响应并保持其纵横比方面的做法：

*{margin:0;padding:0}
html{
  height:100%;
  box-sizing:border-box
}
*,::before,::after{box-sizing:inherit}
body{
  color:#fff;
  font-family:sans-serif;
  position:relative;
  height:100%
}
video{
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:50% 50%;
  position:fixed;
  z-index:-1;
}
section{
  position:relative;
  display:flex;
  z-index:1;
  position:absolute;
  background:rgba(255,255,255,.5);
  width:100%;
  height:100%;
  align-items: center;
  justify-content: center;
  text-align:center
}

<!--Video-->
<video autoplay loop>
		<source src="http://files.gamebanana.com/bitpit/rafa_l_de_jongh_-_2d3d_artist_-_80_.mp4" type="video/mp4">
	</video>
<!--Content-->
<section id="meat">
  <p><span class="name">xxxxxx</span>
    <br>
    <span class="surname">xxxxxx</span>
  </p>
</section>

也可以在JSFiddle上查看

主要将视频设置为适合对象：覆盖，这样您的内容就不会被挤压，并且您的对象位置位于中心。除了确保html，正文和部分的高度可以按百分比调整，并且一切都是响应式的。

不过，我不会在它周围浪费一个额外的div，它不会有任何好处。

无论哪种方式，我都希望它有所帮助！