【SWELL】メインビジュアル動画の音声有効化する切り替えボタンの設置方法

SWELLマニアのかんた（@swell_mania）です。

メインビジュアルの動画に音声を有効化する再生ボタンを付けてみました↓

【SWELL】メインビジュアル動画のBGMを再生するサンプルサイト

「BGMをオンにする」のボタンをクリックすると、動画のBGMが再生するというシンプルな作りです。

音声を再生中に再びボタンをクリックすると音声は停止します。

標準機能だとメインビジュアル動画のBGMは再生されない

SWELLのメインビジュアルはカスタマイザーから動画を指定できます。

ただし動画ファイルに音声が付いていても音声は再生されません。音声を有効化するオプションもはありません。

BGMを再生したり、停止する機能があったら面白そうだと思い、独自カスタマイズしてみました。

サンプルサイト

【SWELL】メインビジュアル動画のBGMを再生するサンプルサイト

→サンプルサイトを開く

＜サンプルサイトの環境＞

• WordPress：6.5.1

• SWELL：2.12

WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。

＜動作確認環境＞

• Windows：Chrome（127.0.6533.120）、Edge（127.0.2651.105）

• Mac（Sonoma 14.6.1）：Chorme、Safari

• iPad（17.6.1）：Chorme、Safari

• iPhone７（15.8.3）：Chrome、 Safari

ブラウザのバージョンは記事公開時に利用可能な最新バージョンです。

更新履歴

• 2024年8月　記事公開

カスタマイズのみならず運用面を考慮し、SWELLのPHPテンプレートファイルは一切編集しない方法でです。

主観ですが、カスタマイズの難易度は低め。
作業時間の目安は3分程度です。