Question

我想要一个ovesized全屏视频。它适用于webkit，但不适用于firefox。

视频徽标应始终保持在垂直/水平中心，如果您具有广泛的浏览器分辨率＆gt; 1300px，就像镀铬一样。在Firefox中虽然它只是水平居中。（对于小分辨率，无关紧要，我在那里加载了不同的视频。）

谁知道神奇的线条？

用于历史记录的代码（与演示中相同）：

<html>
<head>
<style>
body {
  padding: 0;
  margin: 0;
}
#slider {
    height: 100%;
    margin: auto;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.id3 {
    background-color: #253061;
    z-index: 1;
}
.plane {
    height: 100%;
    position: absolute;
    top: 0;
    vertical-align: bottom;
    width: 100%;
}

.videoslide {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.bgvid {
    bottom: 0;
    left: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -100;
}
</style>
</head>
<body>
<div id="slider">
  <div class="plane id3" rel="3">
    <div class="videoslide">
      <video autoplay="autoplay" loop class="bgvid">
        <source type="video/mp4" src="startseite_5_1251.mp4"></source>
      </video>
    </div>
    <div class="innerplane">
      <div class="text" rel=4>
        <div class="title">Wir produzieren aufregenden Video Content -</div>
        <div class="title subtitle3 bmarg50">Zum Beispiel f&uuml;r den Ryder Cup.</div>
        <a class="sliderlink link3" href="#">Projekt ansehen</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 1

试试这个：

.bgvid {
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    z-index: -100;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

如何在firefox中垂直和水平居中显示超大全屏视频？

1 个答案: