動画をファーストビューに設定するサンプル

タイトルエリアに背景動画を設置して、自動再生するサンプルです。
 
こちらが元Notionの記事のリンクです。元Notionで貼った動画をページ読み込み時に隠して、背景動画に移動しています。

追加CSS


/* コンテンツを横いっぱいに */
.container {
    max-width: none;
    padding: 0;
}
.titleSection {
    position: relative;
}
/* 動画のサイズ設定 */
.titleSection .bgmovie{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 動画表示エリア */
.titleSection__contentsWrapper {
    position: relative;
    color: #fff;
    height: 50vh; //任意の高さ
    justify-content: center;
    align-items: center;
    display: flex;
}
.title {
    margin: 0;
}
/*  */
.separatedSection__contentsWrapper {
    max-width: 800px;
    margin: auto
}
CSS
 

head内html追記

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
CSS
 

head内body追記

※IDをご自身の動画に合わせて変更してください。video要素を囲っているfigure要素です。
<script>
window.history.popState = playFirstViewMovie;
window.history.pushState = playFirstViewMovie;
$(document).ready(playFirstViewMovie);

function playFirstViewMovie() {
  setTimeout(function(){
    if(location.pathname == "/firstview_movie"){
      var videoId = "#block-0d1044503d374bf9be650a3577702698" //IDをご自身の動画に変更してください
      var videoSrc = $(videoId +" video")[0].src
      $(videoId +" video").hide();
      $(".titleSection").prepend("<video class='bgmovie' src='" + videoSrc + "' autoplay mute loop />");
      $(".titleSection video")[0].pause();
      $(".titleSection video")[0].play();
    }
  },50)
}
</script>
JavaScript