0

少し問題があります。ブラウザに合わせて調整したいビデオがあります。伸縮するべきではありませんが、スペースが表示されているべきではありません

HTML:

<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>

CSS:

#wereldbol {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-size:cover;
}

background-size: cover;ビデオが中心からずれてしまうという問題を引き起こしています。ブラウザの幅と高さ全体をカバーする別の方法はありますか? ビデオが正しくスケーリングされていても、画像の左右に白いバーが残るため、現時点width: 100%では問題を完全には修正していません。height: 100%この問題を解決する方法はありますか?

4

2 に答える 2

2

私があなたを正しく理解していれば、あなたが達成しようとしているのは、ビデオのアスペクト比を維持することですが、ビデオを引き延ばさずに周囲に適応させることです。これが私がそれを行う方法です：

div次のように、ビデオ要素を でラップします。

<div class="video-wrapper">
    <video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>

次に、次の CSS を使用します。

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow: hidden;
  border: 0;
}

.video-wrapper video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

編集: ここにプランカーがあります: ビューポート幅を調整して、それがどのように機能するかを確認します。

于 2014-10-31T13:08:53.683 に答える