サイトアクセスした際の動画再生終了後に、動画を非表示にしてコンテンツをフェードで表示したい

Question

恐れ入りますが、アドバイスをいただけますようお願いいたします。

前提・実現したいこと

現在制作中のサイトで、アクセスした際にフルスクリーン動画を流します。
動画の再生終了後に、動画を非表示にしてmainとfooterをフェードにて表示させたいです。（headerは表示のままです）

やりたいことはこちらのサイトさまの記事と同じなので参考にさせていただいておりますが、main要素に対する記述のため、footerも含ませる方法についてわかりかねています。
https://blanche-toile.com/web/fade-content-change

該当のソースコード

<header></header>

<div id="opv-wrap">
  <video id="opv" autoplay muted>
    <source src="video/opening01.mp4" type="video/mp4">
    <source src="video/opening01.webm" type="video/webm">
  </video>
</div>

<main>
  <section id="mv" class="section-conts">
    <h1>WELCOME!</h1>
  </section>
</main>

<footer></footer>

#opv-wrap {
display: none;
}

video#opv {
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  vertical-align: bottom;
}

main {
  display: none;
}

#mv {
  height: 100vh;
  background-color: rgb(216, 251, 254);
  display: flex;
  justify-content: center;
  align-items: center;
}

$(function(){

  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    setTimeout(function(){
      $('#opv-wrap').fadeOut(1000, function(){
        $('main').fadeIn(1000);
      });
    }, playTime);
  });
});

試したこと

11行目のコードに
$('main,footer').fadeIn(1000);　というように「footer」を追加してみました。
以下のようにしましたがうまく表示されません。

$(function(){

  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    setTimeout(function(){
      $('#opv-wrap').fadeOut(1000, function(){
        $('main,footer').fadeIn(1000);
      });
    }, playTime);
  });
});

似たような解決策を探し出せず、jsも勉強し始めたばかりのため
お知恵のある方からお力をお借りできればと思い、質問をさせていただきました。
何卒よろしくお願いいたします。

Answer 1

js内に
$("main,footer").fadeIn(1000);を残しつつ
css内・footerにdisplay: none;を記述したら、無事にイメージ通りの再現ができました。

main , footer { display: none; }

$(function(){

  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    setTimeout(function(){
      $('#opv-wrap').fadeOut(1000, function(){
        $("main,footer").fadeIn(1000);
      });
    }, playTime);
  });
});