【初心者向け】動画エリアでヘッダーを非表示にする方法

ブランドページ等でフルスクリーンの動画を表示させてカッコよく世界観を表現しているのに、ヘッダーがいるとなんかイマイチ。でも、スクロールダウンしたらブランドロゴやメニューを表示したい！

といった時に便利な「動画エリア以外でヘッダーを表示させる方法」を紹介します。

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

動画エリアでヘッダーを非表示にする2つの方法
完成イメージ
設定用のコード
1. 動画がページトップにある場合
2. 動画がページトップ以外もしくは複数ある場合
まとめ

動画エリアでヘッダーを非表示にする2つの方法

動画の表示位置ごとに設定方法を変えると、やりたいことの実現に加えてサイト負荷も抑えられます。

ページトップの場合と、それ以外の場合の2つの設定方法があります。

動画の設置位置	ヘッダーを表示する定義
ページトップ	動画の高さを固定し、その高さよりスクロールダウンしたらヘッダーを出す
ページトップ以外	動画エリアを検知して、そのエリア以外でヘッダーを出す

「ページトップ以外」での設定方法を使うと、複数動画があった場合にも適用されます。

完成イメージ

以下のデモボタンをクリックすると、以下2つの動画エリア以外でヘッダーが表示されます。

ここでは、「ページトップ以外」に動画があるパターンで設定しています。

（すでにヘッダーが存在している場合には、新たにヘッダーを作成せずに既存のものを使えばOK！）

設定用のコード

では、以下の手順で早速設定していきましょう！

以下の該当するパターンのコードをコピー
★マーク箇所を表示させたい動画やロゴに書き換える
色や高さなどデザインを調整
wordpressの場合にはカスタムhtmlブロックに貼り付ける

動画がページトップにある場合

<div id="new-header" class="new-header">
  <img decoding="async" src="★ロゴマーク" alt="" class="header-logo">
  <div id="new-hamburger-button" class="hamburger-button">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

<div class="content">
  <video preload="none" src="★お好みの動画" autoplay muted loop playsinline></video>
</div>

<style>
/* 既存のヘッダー非表示（wordpressの例） */
div#header-container {
  display: none;
}

/* 新しいヘッダーのスタイル */
.new-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d3f0b4; /* ★好きな色に変えてください */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none; /* 初期状態で非表示 */
}

.header-logo {
  height: auto;
  max-height: 50px; /* ロゴの最大高さ */
}

.hamburger-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1010;
}

.hamburger-button .bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background-color: black;
  transition: background-color 0.3s;
}

/* コンテンツのスタイル */
.content {
  margin-top: 70px; /* ヘッダーの高さ分のマージンを追加 */
}

video {
  width: 100%;
  display: block;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const newHeader = document.getElementById("new-header");
  const scrollThreshold = 300; // ★ヘッダーを表示するスクロールの高さを指定（ピクセル単位）

動画がページトップ以外もしくは複数ある場合

<div class="content">
  <video preload="none" src="★お好みの動画" autoplay muted loop playsinline></video>
  </div>

<style>
/* 既存のヘッダー非表示（wordpressの例） */
div#header-container {
  display: none;
}

/* 新しいヘッダーのスタイル */
.new-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d3f0b4; /* 好きな色に変えてください */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.header-logo {
  height: auto;
  max-height: 50px; /* ロゴの最大高さ */
}

.hamburger-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1010;
}

.hamburger-button .bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background-color: black;
  transition: background-color 0.3s;
}

/* コンテンツのスタイル */
.content {
  margin-top: 70px; /* ヘッダーの高さ分のマージンを追加 */
}

video {
  width: 100%;
  display: block;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const newHeader = document.getElementById("new-header");
  const videos = document.querySelectorAll(".content video");

let videosInView = new Set();

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        videosInView.add(entry.target);
      } else {
        videosInView.delete(entry.target);
      }

// ヘッダーを表示する条件
      if (videosInView.size === 0) {
        newHeader.style.display = "flex";  // ヘッダーを表示
      } else {
        newHeader.style.display = "none";   // ヘッダーを非表示
      }
    });
  }, { threshold: 0 });

videos.forEach(video => {
    observer.observe(video); // 全ての動画要素を監視対象に設定
  });
</script>

まとめ

動画エリアではヘッダーを非表示にし、それ以外でヘッダーを表示させるという方法を2つ紹介しました。ページトップに動画を置く場合には、動画の高さを指定してそれ以降でヘッダーを表示させるようにし、動画を複数置く場合やページトップ以外に配置する場合には、動画を検知してヘッダーの表示/非表示を設定する方法がおすすめです。

wordpress動画エリアでヘッダーを非表示にする方法

動画エリアでヘッダーを非表示にする2つの方法

完成イメージ

設定用のコード

動画がページトップにある場合

動画がページトップ以外もしくは複数ある場合

まとめ

wordpress動画エリアで
ヘッダーを非表示にする方法