背景動画をセクションごとに変更するにはどうすれば良いですか？

Question

https://koukoku-unyou.com/recruit/
↑該当ページです。

上記のように

Be simleの背景:city.mp4
Be creativeの背景:high-five.mp4

としたいのですが、うまくいきません。

このように、後に追加したhigh-five.mp4がBe Simpleの部分を侵食しています。
どうしたらセクションごとに上手くいかせることが出来るでしょうか？
「background-image 複数」などでググっても、
複数画像を重ね合わせる技しか見つからなくて困ってます。
よろしくお願いします。

<!-- 働き方キャッチコピー 動画-->
<section class="workstyle1-copy">
  <div class="workstyle1-copy-wrap">
    <!-- 背景用の動画ファイル -->
    <video class="workstyle1-copy-video"  poster="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/city.png" autoplay loop muted >
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/city.mp4">
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/city.mov">
    </video>
    <!-- オーバーレイ -->
    <div class="overlay1"></div>
    <!-- 背景の上に表示させたいコンテンツ -->
    <div class="workstyle1-copy-title">
      <p>Be Simple</p>
    </div>
  </div>
</section>




<!-- 働き方 -->
<section class="recruit-workstyle">
  <div class="recruit-workstyle-wrap">
    <p>私たちは<span>「シンプルな本質」</span>を追求している会社です。</p>
    <p>必要なスキルさえ持っていれば、</p>
    <ul>
      <li><i class="fas fa-check"></i>短い稼働時間</li>
      <li><i class="fas fa-check"></i>高単価な報酬</li>
      <li><i class="fas fa-check"></i>完全リモートワーク</li>
    </ul>
    <p>このような条件で働いて頂けます。</p>
    <P class="recruit-workstyle-text1">綺麗なオフィスや福利厚生などは全て削り、<br>
        <span>パートナーに還元</span>していく。</P>
    <p class="recruit-workstyle-text2">それが当社の経営方針です。</p>
  </div>
</section>

<!-- 働き方キャッチコピー2 動画-->
<section class="workstyle2-copy">
  <div class="workstyle2-copy-wrap">
    <!-- 背景用の動画ファイル -->
    <video class="workstyle2-copy-video"  poster="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.png" autoplay loop muted >
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.mp4">
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.mov">
    </video>
    <!-- オーバーレイ -->
    <div class="overlay2"></div>
    <!-- 背景の上に表示させたいコンテンツ -->
    <div class="workstyle2-copy-title">
      <p>Be creative</p>
    </div>
  </div>
</section>

//動画1の部分
.workstyle1-copy {
  height: 700px;
  position: relative;
}

.workstyle1-copy .overlay1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 50%);
  background-size: 3px 3px;
  z-index: -1;
}

.workstyle1-copy-wrap {
  margin: 0 auto;
  overflow: hidden;
}

.workstyle1-copy::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background: rgba(0, 0, 0, 0.2);
  background-size: 3px 3px;
  background-size: cover;
}

/* ----- 背景用の動画ファイル ----- */
.workstyle1-copy-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-image: url(../img/city.png);
  -o-object-fit: cover;
  object-fit: cover;
}

/* ----- 背景の上に表示させたいコンテンツ ----- */
.workstyle1-copy-title p {
  font-family: 'Pacifico', cursive;
  font-size: 10vw;
  color: rgba(68, 255, 0, 0.9);
  font-weight: bold;
}

.workstyle1-copy-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
//動画2の部分
.workstyle2-copy {
  height: 700px;
  position: relative;
}

.workstyle2-copy .overlay2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 50%);
  background-size: 3px 3px;
  z-index: -1;
}

.workstyle2-copy-wrap {
  margin: 0 auto;
  overflow: hidden;
}

.workstyle2-copy::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background: rgba(0, 0, 0, 0.2);
  background-size: 3px 3px;
  background-size: cover;
}

/* ----- 背景用の動画ファイル ----- */
.workstyle2-copy-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-image: url(../img/city.png);
  -o-object-fit: cover;
  object-fit: cover;
}

/* ----- 背景の上に表示させたいコンテンツ ----- */
.workstyle2-copy-title p {
  font-family: 'Pacifico', cursive;
  font-size: 10vw;
  color: rgba(68, 255, 0, 0.9);
  font-weight: bold;
}

.workstyle2-copy-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

Answer 1

背景に固定で複数は難しいようですが、
absoluteにすることで複数の動画を入れる組み込むことが出来ました。

.workstyle1-copy-video {
  // position: fixed;
  position: absolute;//追加
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
　//z-index: -100;
  z-index: -1;//追加
  background-image: url(../img/city.png);
  -o-object-fit: cover;
  object-fit: cover;
}

Answer 2

こういうことですか？

.workstyle1-copy-video,
.workstyle2-copy-video{
  position: relative;
}

Comments

[takawork]

ありがとうございます！
コードを追加してみたのですが、状況は変わらずといった感じです。
質問いイメージ画像を載っけたのでお手数ですが確認頂けるとありがたいです。

[Lhankor_Mhy]

最後の方に書かないと上書きされると思います。

[takawork]

一番最後に載っけているのですが、どうも動かないようです。

[Lhankor_Mhy]

では、position:fixed になっている部分を直接書き換えた方が早いかもしれませんね。

[takawork]

そうですね！アンサーに書いた通り、その方法で上手く行きました！