パララックスの背景に動画を設置したい

Question

前提・実現したいこと

パララックスデザインで背景（固定）に画像ではなくてyoutubeのurlか、mp4を配置したい。
以下のようにhtmlでdivで背景、前景をくくり、CSSで背景にbackground-imageとしてmp4を設置。
どのように直せば動画が表示されるのでしょうか。html側にVIDEOタグで置いたのですが、それだと表示はされても固定されません。如何なものでしょうか。宜しくお願い致します。

<div class="wrap">
    <div class="parallax No01">
/*追記箇所*/
<video autoplay muted loop><source src="img/life_is_beautiful.mp4" type="video/mp4"></video>/*ここまで*/
    </div>
    </div>
    <div class="message">
　　</div>
　　<div class="parallax No02">
/*追記箇所*/
<video autoplay muted loop>
    <source src="img/キャッチ・ミー・イフ・ユー・キャン - 予告編.mp4" type="video/mp4"></video>/*ここまで*/
    </div>
    <div class="message">
　　</div>
</div>

/*削除*/
.bg-01 {
background: url("img/life_is_beautiful.mp4")
.bg-02 {
background: url("img/catch_me_if_u_can.mp4")
}/*ここまで*/

.parallax video{
  height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box; 
/*追記*/
  position:fixed;
  z-index:-100;
}/*ここまで*/
.message{
	width: 100%;
	color:black;
	height: 300px;
	padding: 30px 100px;
	margin: 0px;
}

発生している問題・エラーメッセージ

動画が何も表示されない。←　解消

パララックスの機能がうまくいかない。←　新たな問題
つまり、parallax No01のvideoが、parallax No02の場所でも
ずっと残って固定されている。No1からNo2のvideoに切り替わらない。

該当のソースコード

CSS
.bg-01 {
background: url("img/life_is_beautiful.mp4")
}

Answer 1

"CSS background video" でググるだけで容易に実装例が見つかりましたが……

• css background video - Google 検索
• CSS - 【CSS】mp4をbackgroundにすることはできるのでしょうか？｜teratail

Comments

[SFUK]

ありがとうございます。ご回答になる参考URLを見ると、CSS側background-imageでは動画を設置できないようですので、htmlにvideoタグで設置。CSSでposition:fixed;とz-index:-1;を追記したとことろ、固定されて表示もされ動いているのですが、パララックスがNo.2の固定背景、No3の固定背景、No.4の固定背景とならず、No1の動画がずっと残っています。お時間よろしければまたよろしくお願いいたします。

[SFUK]

枠組みの構成からすると、修正前CSSで以下のように書いていた箇所に動画がおければうまくいくのですが。。CSS側でmp4ファイルを設置できる方法があればいいのですが。。
.bg-01 {
background: url("img/life_is_beautiful.jpg")
}
.bg-02 {
background: url("img/catch me if u can.jpg")
}

[thyda.eiqau]

videoで設置しているHTMLの提示がないとなんとも言えませんが、スクロールに応じて動画を切り替える処理を実装していないのではないですか？

[SFUK]

html側はこのような記述です。スクロールに応じて動画を切り替える処理とはhtmlのみで可能ですか？

<div class="wrap">
<div class="parallax bg-01">
<video autoplay muted loop><source src="img/life_is_beautiful.mp4" type="video/mp4"></video>
</div>
<div class="message">
<h1>『ライフ・イズ・ビューティフル』</h1>
</div>
<div class="parallax bg-02">
<video autoplay muted loop>
<source src="img/キャッチ・ミー・イフ・ユー・キャン - 予告編.mp4" type="video/mp4"></video>
</div>
<div class="message">
<h1>『キャッチ・ミー・イフ・ユー・キャン』</h1>
</div>

[thyda.eiqau]

質問の根幹にあたる部分ですので質問本文に追記してください。
あと、コードは <code> ボタンを使って適切に表示されるようにしてください。

[thyda.eiqau]

あとcssも必要ですので同様に質問本文に追記する形でご提示ください

[SFUK]

失礼いたしました。質問を編集いたしました。宜しくお願い致します。