3

JSを使用せずにHTML5ビデオを要素のように動作させようとしていますbackground: center center fixed; background-size: cover;(それを行うJSライブラリがあることは知っています)。メディア クエリを使用して、ビデオのアスペクト比と比較したウィンドウのアスペクト比に応じて、幅または高さを 100% に設定する方法を見つけました (以下の例では、16/9 ビデオを使用していると想定しています)。あとは、ビデオを水平方向または垂直方向の中央に配置するだけです。

どんな助けでも大歓迎です。

@media screen and (max-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    height: 100%;
    z-index: -100;
  }
}

@media screen and (min-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    width: 100%;
    z-index: -100;
  }
}
4

2 に答える 2

1

それを達成するためにメディアクエリさえ必要ありません:)

これを試して：

#fixed {
    position: relative;
    height: 100vh;
    z-index: 0;
}
#fixed video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
<div id="fixed">
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</div>

これが実用的なフィドルの例です。

それが役に立てば幸い ：）

于 2015-02-18T02:14:10.903 に答える
1 
@media screen and (max-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    height: 100%;
    z-index: -100;
    top: 0;
    bottom: 0;
    margin:auto 0;
  }
}

@media screen and (min-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    width: 100%;
    z-index: -100;
    text-align: left;
    right: 0;
    left: 0;
    margin:0 auto;
  }
}
于 2012-06-27T14:58:28.343 に答える