今更だけど…レスポンシブ対応！背景にvideoタグで動画を設置したい！

キービジュアルを動画にする際にレスポンシブにするんだけど
久しぶりにやると、あれ？どうするんだっけ？となったので
今更ですが背景にvideoタグで動画を設置して、なおかつレスポンシブ対応するときの
やり方を、自分用に議事録で残しておきます。

基礎的なvideoタグの書き方は今回端折ります。笑
単純にCSSでの調整だけなので、要素などは好きなIDやクラスを付けておけば
コピペで実装できると思います！

ぜひ試してみてください。

<div id="key_wrap">
     <div id="keyVisual">
          <div class="videoBox">
               <video src="ここに動画のURL" preload="none" autoplay="" loop="" muted=""></video>
          </div>
     </div>
</div>

#key_wrap {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	#keyVisual {
		width: 100%;
		height:100%;
		position: relative;
		.videoBox {
			position: relative;
			width: 100%;
			height: 100%;
			video {
				min-height: 100%;
				min-width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				overflow: hidden;
			}
		}
	}
}
Share: