【WordPress全画面動画ヘッダーの作り方】プラグインなし（カスタムHTMLと追加CSSで作る）

企業やお店のホームページでは、特にトップページのヘッダーにインパクトのある画像やスライドショーなどでユーザーの目を引き興味を持ってもらうことは大変重要です。

とくに最近、動画を使ったヘッダーが多いように思います。ホームページにアクセスしていきなり全画面の動画が流れたらインパクト大ですよね！

そんな全画面の動画ヘッダーをWordPressで、有料テーマもプラグインも使わずに実現したいと思います。

有料のものにすれば、トップページヘッダーを目立つ全画面の動画を使えるテーマが結構あるのですが、無料のものとなるとなかなか見つからなかったのと、プラグインを使って実現できるかと思ったのですが、理想のものがやはり見つからなかったので自作することにしました。

Contents

全画面動画ヘッダーの企業サンプルサイト

今回、IT企業風のサンプルサイトを制作してみました。

https://em-webcreate.com/sample01

HTMLとCSS

現在、ほとんどのメジャーなブラウザでは、HTML5という規格に対応しており、HTML5では、videoタグを使って簡単に動画を埋め込んで再生することができます。

今回、WordPressの無料テーマ「Business Press」を使って、全画面動画ヘッダーのサンプルサイトを作りたいと思います。

まずは、フロントページ用に固定ページを作って、「設定」＞「表示設定」でホームページに設定し、固定ページの編集画面でカスタムHTMLで以下のコードを記述、「外観」＞「追加CSS」で以下のCSSを記述します。

カスタムHTML

<div class="header_wrap">
  <div class="header_movie">
    <video autoplay="" loop="" playsinline="" muted="" src="（動画ファイル名）.mp4"></video>
  </div>
</div>

（動画ファイル名）.mp4は、「メディア」＞「新規追加」でアップロードした動画ファイルが入ります。

<video …></video>がvideoタグで、autoplay（自動再生）、loop（繰り返し）、playsinline（インライン再生）、muted（ミュート）になります。

追加CSS

.header_wrap{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0 calc(50% - 50vw);
}
.header_movie{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
  overflow: hidden;
	z-index: 1;
}
.header_movie video {
  display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

ヘッダー画像やヘッダーメニューが邪魔なので、以下の追加CSSで調整します。

.home-header, .home .jumbotron{
	display: none;
}
.home .site-header{
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(255,255,255,0.5);
	width: 100vw;
	z-index:2;
}

ヘッダー画像やホームページヘッダーを非表示にして、メニューは透過で動画の上に表示されるようにしました。

さらに動画の上にタイトルやメッセージを載せ、下の方に下向きの矢印を表示させてみます。

最終的なHTMLと追加CSSは以下のようになります。

カスタムHTML

<div class="header_wrap">
  <div class="header_movie">
    <video autoplay="" loop="" playsinline="" muted="" src="（動画ファイル名）.mp4"></video>
  </div>
  <div class="header_text">
    <h2>EM Tech Company</h2>
    <h3>時代をリードするテクノロジーカンパニー</h3>
  </div>
  <div class="arrow_wrap">
    <div class="down">Page Down</div>
    <div class="arrow"></div>
  </div>
</div>

追加CSS

.home-header, .home .jumbotron{
	display: none;
}
.home .site-header{
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.5);
	width: 100vw;
	z-index: 2;
}

.header_wrap{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0 calc(50% - 50vw);
}
.header_movie{
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 1;
}
.header_movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}
.header_text{
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.header_text h2{
	font-size: 60px;
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 8px #000;
	margin-bottom: 0;
}
.header_text h3{
	font-size: 20px;
	color: #fff;
	text-shadow: 2px 2px 8px #000;
	margin-top: 10px;
}
.arrow{
	position: absolute;
	top: 85%;
	left: 50%;
	width: 30px;
  height: 30px;
  border: 2px solid;
  border-color: transparent transparent #fff #fff;
  transform: rotate(-45deg) translatex(-30px);
	z-index: 2;
}
.down{
  position: absolute;
	top: 80%;
	left: 50%;
	transform: translatex(-50px);
	color: #fff;
	z-index: 2;
}

少し長くなりましたが、こんな感じで、全画面の動画ヘッダーを使えば、かなり印象的なホームページになるのではないかと思います。

デモサイト

EM Web Createでは、上記のサンプルサイトのようなWordPressを使った格安ホームページ制作をスキルマーケット・ココナラで承っております。