【SWELL】背景に固定で動画を表示するカスタマイズ方法

※2023年9月8日記事更新。
SWELL最新バージョン（2.7.8.4）に対応しました。

WordPressテーマSWELLで、背景に動画を固定で表示する方法についてのメモ書きです。

SWELLはメインビジュアルに動画を指定するオプションはありますが、対象はトップページのみ。ページを下にスクロールすると、当然ながら見切れてしまいます。

本記事では背景に動画を設置し、ページを下にスクロールしても背景の動画はその位置をキープするカスタマイズ方法についてです。

まずは今回のカスタマイズを実装したデモサイトです↓

【SWELL】固定動画を背景に設定したデモサイト

→デモサイトはこちら

カスタマイズ内容

SWELLのPHPテンプレートファイルを編集しないカスタマイズ方式です。フックを使いますので、Code Snippetsプラグインのようなコードを貼り付ける無料プラグインがあるのが前提です。

プラグインを増やしたくない人は子テーマのfunctions.phpにコードを追加するという方法も使えますのでアップデートで設定コードが上書きされる心配はありません。

動画はvideoタグを使った一般的な埋め込み方式です。今回のカスタマイズに限らず、メチャクチャ古い端末やブラウザでは動画が再生されない可能性があります。

背景動画は、WordPress上にアップロードする任意の動画ファイルです。YouTube動画ではありませんので、意図しない広告が表示されることはありません。

＜バージョン情報＞
デモサイトはWordPress、SWELLともに記事執筆時に利用可能な最新バージョンです。

• WordPress：6.3.1

• SWELL：2.7.8.4

更新履歴

• 2023年9月　記事更新

• 2023年8月　記事更新

• 2023年1月　記事公開

有料記事部分では、次のカスタマイズ方法についても解説しています。

• トップページだけに背景動画を表示する方法

• トップページとアーカイブページだけに背景動画を表示する方法

• トップページと記事ページだけに背景動画を表示する方法

• 特定の固定ページだけに背景動画を表示する方法

• 特定の記事ページだけに背景動画を表示する方法

• 固定ページAには背景動画a、固定ページBには背景動画bを表示する方法