のように動画背景が重なってしまいます
下のようにしたいです
CSSが原因なのは分かるのですが勉強し始めたばかりでどこを直せばいいのか分かりません
何卒ご教授よろしくお願いいたします
以下がそのCSSです
.video_area_1がクラゲの背景動画で.video_area_2が植物の背景動画です
CSS
1.video_area_1{ 2 position: fixed; 3 z-index: -1; /*奥に表示するのか手前に表示するのか*/ 4 top: 50px; /*位置指定。上からどれくらい離すのか*/ 5 bottom: 0; /*位置指定。下からどれくらい離すのか*/ 6 left: 0; /*位置指定。左からどれくらい離すのか*/ 7 right: 0; /*位置指定。右からどれくらい離すのか*/ 8 overflow: hidden; /*要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定する。overflow:hiddenを指定すると、要素のボックスからはみ出てしまった部分は隠れて見えなくなります*/ 9 10} 11.video{ 12 position: absolute; 13 z-index: -1; 14 top: 50%; 15 left: 50%; 16 transform: translate(-50%,-50%);/*要素を水平方向や垂直方向で再配置します*/ 17 width: 177.7778em; 18 height: 56.25vw; 19 min-width: 100%; /*「widthの取ることのできる最小値」を指定します。言い換えると要素がこれ以上小さくならない幅を指定すること*/ 20 min-height: 100%; 21 22} 23 24.video_area_2{ 25 position: fixed; 26 z-index: -1; /*奥に表示するのか手前に表示するのか*/ 27 top: 500px; /*位置指定。上からどれくらい離すのか*/ 28 bottom: 0; /*位置指定。下からどれくらい離すのか*/ 29 left: 0; /*位置指定。左からどれくらい離すのか*/ 30 right: 0; /*位置指定。右からどれくらい離すのか*/ 31 overflow: hidden; /*要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定する。overflow:hiddenを指定すると、要素のボックスからはみ出てしまった部分は隠れて見えなくなります*/ 32 33}
一応HTMLも書かせていただきます
HTML
1 <div class="video_area_1"> 2 <video class="video" poster="sea.jpg" muted autoplay loop> 3 <source src="sea.mp4" type="video/mp4"> 4 動画は再生できません 5 </video> 6 </div> 7 8 <div class="video_area_2"> 9 <video class="video" poster="green.jpg" muted autoplay loop> 10 <source src="green.mp4" type="video/mp4"> 11 動画は再生できません 12 </video> 13 </div>
回答2件
あなたの回答
tips
プレビュー