如何在Firefox中垂直和水平居中放置超大尺寸的全屏視頻？

Question

我想居中一個全屏視頻。 它可以在webkit中工作，但不能在Firefox中工作。

如果您的瀏覽器分辨率大於1300像素（例如chrome），則視頻徽標應始終位於垂直/水平中心。 在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 個解決方案

解決方案1
0 已采納 2015-02-04 09:27:08

如何在Firefox中垂直和水平居中放置超大尺寸的全屏視頻？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-02-04 09:27:08

解決方案1
0 已采納 2015-02-04 09:27:08