質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

872閲覧

(CSS)動画背景が重なってしまいます

help-man

総合スコア58

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/04/19 06:37

イメージ説明
のように動画背景が重なってしまいます
下のようにしたいです
イメージ説明
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

recal

2022/04/19 09:04

.video_area_2で top: 500px; /*位置指定。上からどれくらい離すのか*/ としてるので、かさなってるんだと思いますが positionでの配置は必須なんでしょうか?
help-man

2022/04/19 14:43

.video_area_2でのtop: 500px;で1000pxとかにしてしまいますと植物の動画背景が画面から消えてしまいます 勉強不足で申し訳ないのですがpositionって大抵は必要なものではないんですか?しないとstaticの設定になってしまうので・・・
guest

回答2

0

自己解決

なんとなく答えが分かりました
背景動画が全画面表示で固定化されていることだと思います
コメントをしてくださった皆様に感謝申し上げます

投稿2022/04/19 15:54

help-man

総合スコア58

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

とりあえずの対処としては、以下のような感じでしょうか。ただ、動画が見切れるかもしれないですね。

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; 9 height: 450px; 10}

投稿2022/04/19 09:19

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

help-man

2022/04/19 14:47

コメントありがとうございます なぜ動画が見切れてしまうのかご教授をお願いできますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問