プラグパーツWEB

・動画を再生してからサイトを表示する

サイトの企業ロゴや数秒のアニメーションの表示などに使えます。

以下プレビュー

HTML

CSS

JavaScript


<!-- 動画を埋め込む -->
<video id="intro-video" autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    お使いのブラウザはサポートしていません。
    ChromeベースのEdgeやGoogle Chrome、Fire Fox、Opera、Braveなどをご利用ください。
</video>


/* 動画の再生中はサイトの内容を隠す */
#site-content {
    display: none;
}
  
/* 動画要素にスタイルを適用する */
#intro-video {
    object-fit: cover;
    margin-top: 0%;
    width: 100%;
    height: 100%;
}


// 動画要素を取得する
var video = document.getElementById("intro-video");
// サイト内容要素を取得する
var siteContent = document.getElementById("site-content");

// 動画の再生が終わったら実行する関数を定義する
function showSiteContent() {
    // 動画要素を非表示にする
    video.style.display = "none";
    // サイト内容要素を表示する
    siteContent.style.display = "block";
}

// 動画のendedイベントに関数を登録する
video.addEventListener("ended", showSiteContent);