Question

我一整天都在努力，但即使我用谷歌搜索，我也没想出来。

基本上我希望与www.tesla.com上的效果相同

视频是全尺寸的，但是会根据窗口的大小调整大小，同时调整一下视频但保持视频居中（在特斯拉网站上试试它很棒）。如果它太小，它会显示一个图像（对于移动设备）。

我正在使用GitHub页面以jekyll主题运行该网站：https://alanlemoine.github.io/personal

我的问题：

在我的13英寸屏幕上，视频太大而且是垂直滚动条出现。我想让它适合窗户，没有滚动条。即使它在底部裁剪视频（具有“溢出：隐藏的“我想？”
调整窗口大小时，将调整整个视频的大小。我想要它会像www.tesla.com一样调整大小，然后保留它它居中。
我不希望视频完全全屏。我需要的顶部的导航栏。所以在DIV中更好。

你能帮忙吗？

提前非常感谢你。

这就是我所拥有的：

/* Default hide the video on all devices */

#video {
  display: none
}


/* Default display the image to replace the video on all devices */

#videosubstitute {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
  #video {
    display: block
  }
  #videosubstitute {
    display: none
  }
}

#videoDiv {
  width: 100%;
  height: 360px;
  position: relative;
}

#videoBlock,
#videoMessage {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
}

#video {
  width: 100%;
}

#videoMessage {
  padding: 0.4em;
  margin: 0;
}

#videoMessage {
  color: white;
  z-index: 99;
}

#videoMessage h1 {
  font-size: 3em;
  color: #ffffff;
  text-align: center;
}

<div id="videoDiv">
  <div id="videoBlock">
    <div><img src="http://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="" width="800"></div>
    <video preload="preload" id="video" autoplay="autoplay" loop="loop">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source>
</video>
    <div id="videoMessage">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

Answer 1

这是一个相对简单的技巧，您可以使用HTML 5和一些CSS。

首先，您需要绝对定位视频元素，并隐藏其溢出。然后你将100％的页面宽度和高度。

接下来，您将基本上拉伸视频以根据屏幕的宽高比裁剪它。有一个叫做object-fit的漂亮的东西，你也可以把它写成object-fit：cover会给你带来相同的效果，但IE还不支持它，所以如果你决定使用它，你将需要两者。

我已经为您提供了一个解决方案。 http://codepen.io/DrkDevil/pen/OpXxZV/

<nav>your navigation goes here.</nav>
<div class="flexCon" >
  <div id="videoMessage">
  <h1>Hello world</h1>
  </div>
</div>
<div id="videoBg">
  <video loop muted autoplay poster="img/videoframe.jpg">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
  </video>
</div>
<style>
#videoBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
#videoBg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (min-aspect-ratio: 16/9) { #videoBg > video { height: 300%; top: -100%; }}
@media (max-aspect-ratio: 16/9) { #videoBg > video { width: 300%; left: -100%; }}
@supports (object-fit: cover) {#videoBg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }}

/* Demo  Classes */
nav { position:fixed; width:100%; top:0; left:0; padding:20px; background:#fff; z-index:2;}
/* Center content with flexbox container */
.flexCon { height: 100vh; display: flex; justify-content: center; align-items: center; }
/* Position the content relative to the flex container  */
#videoMessage { z-index:1; position:relative; }
</style>

这是一个非常好的探索，您将如何更深入地实现您正在寻找的目标。

https://fvsch.com/code/video-background/

Div中的HTML5视频背景 - 需要帮助调整窗口大小

1 个答案: