ビデオ背景のヒーローセクションは、ブロックテーマならコアの「カバー」ブロックで、クラシックテーマなら子テーマに <video> 要素を使ったテンプレートを追加することで実装できます。どちらの方法でも、動画を軽く作ること、音声なしの自動再生にすること、動きを減らしたい利用者やスマートフォンへの配慮を入れることが、表示速度と使いやすさを保つ鍵です。この記事では両方の手順と、公開前に確認すべき点を説明します。
先に動画ファイルを用意する
ヒーローの背景動画は、ページを開いた直後に読み込まれるため、ファイルの重さがそのまま表示速度に響きます。実装に入る前に、次の方針で動画を作っておきます。
- 長さは短く：10〜20秒程度のループで十分です。長い動画ほどファイルが大きくなります。
- 音声トラックは削除：背景動画は消音で再生するので、音声データは無駄になります。
- 形式はMP4（H.264）を基本に：多くのブラウザで再生できます。さらに軽くしたい場合はWebMを追加で用意し、両方を
<source>で指定します。 - 解像度は表示サイズに合わせる：画面幅いっぱいでも、背景用途なら1280〜1920px幅程度で足りることが多いです。
- ポスター画像も作る：動画の1コマ目をJPEGやWebPで書き出しておきます。動画の読み込み前や再生できない環境では、この画像が表示されます。
変換にはFFmpegのようなツールが使えます。サーバーのアップロード上限を超える大きさの動画は、メディアライブラリに登録できない点にも注意してください。
方法1：ブロックテーマならカバーブロックを使う
Twenty Twenty-Five などのブロックテーマでは、コアの「カバー」ブロックが動画背景に対応しています。コードを書かずに済み、テーマの更新とも衝突しにくい方法です。
- サイトエディターでフロントページのテンプレート（または固定ページ）を開きます。
- ページの先頭に「カバー」ブロックを追加し、背景に用意した動画を選びます。
- ブロックの設定で、オーバーレイの色と不透明度を調整し、文字が読みやすいコントラストにします。
- カバーブロックの中に見出し、短い説明文、ボタンを配置します。
- 高さ（最小の高さ）を指定し、画面いっぱいにするか、少し下のコンテンツが見える程度にするかを決めます。
カバーブロックで動画を選ぶと、消音・ループ・インライン再生の属性付きで自動再生される <video> 要素が出力されます。出力されたHTMLは開発者ツールで確認できます。設定項目の名称や配置はWordPressのバージョンで変わることがあるため、画面の表記は作業時点のものを確認してください（2026年10月現在）。
カバーブロックだけでは、動きを減らす設定の利用者への対応や一時停止ボタンが十分でない場合があります。最低限の配慮として、子テーマの style.css やサイトエディターの追加CSSに次の指定を加えると、OSのアクセシビリティ設定で視覚効果や動きを減らすよう指定している利用者には動画を表示しないようにできます。
@media (prefers-reduced-motion: reduce) {
.wp-block-cover__video-background {
display: none;
}
}この場合、動画の代わりにオーバーレイの色が背景として見えるので、オーバーレイの色は単色でも見栄えがするものを選んでおきます。
方法2：クラシックテーマでは子テーマにテンプレートを追加する
クラシックテーマでは、ヒーロー部分をテンプレートパーツとして子テーマに作り、フロントページのテンプレートから読み込みます。まず、動画とポスター画像をメディアライブラリにアップロードし、それぞれの添付ファイルIDを控えます（メディアの編集画面のURLに含まれる数字です）。
子テーマに template-parts/hero-video.php を作ります。
<?php
// 子テーマの template-parts/hero-video.php
$video_id = 123; // 動画の添付ファイルID
$poster_id = 124; // ポスター画像の添付ファイルID
$video_url = wp_get_attachment_url( $video_id );
$poster_url = wp_get_attachment_image_url( $poster_id, 'full' );
?>
<section class="hero-video">
<?php if ( $video_url ) : ?>
<video class="hero-video__media"
muted loop playsinline preload="none"
poster="<?php echo esc_url( $poster_url ); ?>"
data-src="<?php echo esc_url( $video_url ); ?>"
aria-hidden="true"></video>
<?php endif; ?>
<div class="hero-video__overlay"></div>
<div class="hero-video__content">
<h1 class="hero-video__title">サイトのキャッチコピー</h1>
<p class="hero-video__lead">短い説明文をここに入れます。</p>
<a class="hero-video__button" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">お問い合わせ</a>
</div>
<button type="button" class="hero-video__toggle" hidden>動画を停止</button>
</section>ここでは autoplay 属性を付けず、動画のURLも src ではなく data-src に入れています。こうすると、HTMLを読み込んだ時点では動画のダウンロードが始まらず、後述のJavaScriptで「再生してよい環境か」を判定してから読み込めます。スマートフォンや通信量を抑えたい環境では、ポスター画像だけが表示されます。
フロントページのテンプレート（親テーマの front-page.php などを子テーマにコピーしたもの）で、表示したい位置に次の1行を入れます。
<?php get_template_part( 'template-parts/hero-video' ); ?>スタイルを指定する
.hero-video {
position: relative;
display: grid;
place-items: center;
min-height: 70vh;
overflow: hidden;
color: #fff;
background: #222;
}
.hero-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-video__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.hero-video__content {
position: relative;
max-width: 40rem;
padding: 2rem;
text-align: center;
}
.hero-video__toggle {
position: absolute;
right: 1rem;
bottom: 1rem;
padding: 0.5rem 1rem;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #fff;
cursor: pointer;
}min-height を指定しているのは、動画の読み込み前後でヒーローの高さが変わらないようにするためです。高さが後から決まると、下のコンテンツがずれるレイアウトシフトの原因になります。object-fit: cover は、画面の縦横比が動画と異なっても余白を出さずに切り抜いて表示する指定です。
再生の判定と一時停止ボタンを付ける
子テーマに assets/js/hero-video.js を作ります。
(function () {
var video = document.querySelector('.hero-video__media');
var toggle = document.querySelector('.hero-video__toggle');
if (!video || !toggle) {
return;
}
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var wideScreen = window.matchMedia('(min-width: 768px)').matches;
// 動きを減らす設定、または狭い画面ではポスター画像のままにする
if (reduceMotion || !wideScreen) {
return;
}
video.src = video.dataset.src;
video.muted = true;
var playing = video.play();
if (playing && typeof playing.catch === 'function') {
playing.catch(function () {
// 自動再生が拒否された場合はポスター画像のまま表示する
toggle.textContent = '動画を再生';
});
}
toggle.hidden = false;
toggle.addEventListener('click', function () {
if (video.paused) {
video.play();
toggle.textContent = '動画を停止';
} else {
video.pause();
toggle.textContent = '動画を再生';
}
});
})();自動で動き続ける背景は、文章を読みたい人の集中を妨げることがあります。アクセシビリティの指針であるWCAGでは、5秒を超えて自動で動く内容には止める手段を用意することが求められているため、一時停止ボタンを付けています。
最後に、フロントページでだけスクリプトを読み込みます。
<?php
// 子テーマの functions.php に追記
add_action( 'wp_enqueue_scripts', 'mychild_enqueue_hero_video' );
function mychild_enqueue_hero_video() {
if ( ! is_front_page() ) {
return;
}
wp_enqueue_script(
'mychild-hero-video',
get_stylesheet_directory_uri() . '/assets/js/hero-video.js',
array(),
filemtime( get_stylesheet_directory() . '/assets/js/hero-video.js' ),
true
);
}公開前の確認ポイント
- 表示速度：PageSpeed Insights などで、最大のコンテンツが表示されるまでの時間を確認します。ヒーローではポスター画像がその対象になることが多いため、ポスター画像も圧縮しておきます。
- スマートフォン：実機で開き、動画を読み込まずにポスター画像が表示されること、文字がつぶれず読めることを確認します。
- 文字の読みやすさ：動画の明るい場面でも見出しが読めるか、オーバーレイの濃さを調整します。
- 自動再生されないとき：
mutedとplaysinlineが付いているか、開発者ツールで<video>要素の属性を確認します。どちらかが欠けると、ブラウザが自動再生を止めることがあります。 - キャッシュ：CSSやJavaScriptを変更しても反映されない場合は、キャッシュ系プラグインやCDNのキャッシュを削除します。
テンプレートやfunctions.phpを編集する前には、子テーマのファイルをバックアップしておいてください。
まとめ
- 背景動画は短く、音声なし、MP4を基本に軽く作り、ポスター画像も用意します。
- ブロックテーマではカバーブロックで動画背景を設定し、
prefers-reduced-motionで動画を隠すCSSを加えます。 - クラシックテーマでは子テーマのテンプレートパーツに
<video muted loop playsinline>を置き、JavaScriptで再生してよい環境か判定してから読み込みます。 - 一時停止ボタンと
min-heightの指定で、使いやすさとレイアウトの安定を確保します。 - 公開前に表示速度、スマートフォン表示、文字の読みやすさを確認します。