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

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

<强> 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 2

虽然您的问题有效。但你的方法不是。我开发了这个，但在移动设备上加载视频需要时间。因此，您需要在背景中显示大屏幕视频和小屏幕背景图像。这可以使用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＆＃34; media_div＆＃34;。然后编写这个Jquery代码。您还需要在文档就绪事件上执行此操作。因为第一次加载页面时＃34;调整大小＆＃34;事件未被解雇。即使有人试图在大屏幕上更改浏览器宽度，这也会使您的代码完全响应。分析此代码。认为。了解。码。 ROCK

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，但它没有任何好处。

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

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

3 个答案: