初心者カバーブロックの動画ループって止まらないの？
止まります。
本記事ではWordPressカバーブロックの動画ループを止める方法を解説します。難しいカスタマイズではありませんので、ぜひチャレンジしてみてください。
【基礎知識】なぜカバーブロックの動画は繰り返し再生するのか？
カバーブロックの動画ループを止めるカスタマイズの前に、なぜカバーブロックの動画が繰り返し再生するのかを解説します。
かんたループの原因を理解するとループを停止するカスタマイズの意味が理解できます。
videoタグのloop属性がループの原因になっている
カバーブロックで背景に動画を指定すると次のHTMLコードが出力されます。
<div class="wp-block-cover has-background-dim">
<video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="動画ファイルのパス" data-object-fit="cover"></video>
<div class="wp-block-cover__inner-container">
2行目のvideoタグにある「loop属性」が動画を繰り返し再生するコードです。このコードがあるためカバーブロックで挿入した動画はひたすら繰り返し再生します。
videoタグのloop属性を削除すればカバーブロックのループは停止します。
かんたloop属性を削除する方法を紹介していきます。
カバーブロックの動画ループを停止するカスタマイズ
今回はWP_HTML_Tag_Processor、JavaScript、jQueryでvideoのループ属性をHTMLコードから削除する方法を解説します。
かんた好きなやり方で試してみてください。
【WP_HTML_Tag_Processor】loop属性を削除するサンプルコード
WP_HTML_Tag_ProcessorはWordPress6.2から導入されたクラスです。
子テーマのfunctions.php、またはCode Snippetsプラグインなどに次のコードを設置しましょう。
function remove_attribute_to_block( $block_content, $block ) {
if ( 'core/cover' === $block['blockName'] ) {
$w = new WP_HTML_Tag_Processor($block_content);
$w->next_tag('video');
$w->remove_attribute('loop');
return $w->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block_core/cover', 'remove_attribute_to_block', 10, 2 );特定のクラス名を付けたカバーブロックだけを対象にする場合の書き方は次の記事で解説しています。
【JavaScript】loop属性を削除するサンプルコード
まずはJaveScriptでloop属性を削除するサンプルコードです。
<script type="text/javascript">
element = document.querySelector('.wp-block-cover__video-background');
element.removeAttribute('loop');
</script>
初心者このままコピペでいいの？
どこに貼ったら動くの？
かんた初心者の人なら「カスタムHTMLブロック」がおすすめ。
同一ページ内に複数のカバーブロックを設置している場合で、特定のカバーブロックの動画のみループを停止する場合でも仕組みは同じです。
事前にカバーブロックに任意のCSSクラスを付けます。例えば「kanta」とCSSクラスを追加したカバーブロックの動画ループを停止するサンプルコードは次の通りです。
<script type="text/javascript">
element = document.querySelector('.kanta>video');
element.removeAttribute('loop');
</script>コードを貼り付けたら作業完了です。
loopタグが消えているかを確認しましょう。
【jQuery】loop属性を削除するサンプルコード
jQueryでvideoタグのloop属性を削除するコードを紹介します。
<script>
jQuery(function(){
jQuery('video').removeAttr('loop');
});
</script>コードの貼り方は？
かんたJavaScriptと基本同じ。
カスタムHTMLブロックにコードを貼り付ければOK
WordPressテーマによってはjQueryに依存しない構造になっています。そういったテーマの場合サンプルのような自作jQueryコードは動作しません。
SWELLはこのパターンに当てはまるテーマです。「SWELL設定」→「jQuery」をクリックし、「jQueryを強制的に読み込み」にチェックを入れることでサンプルコードが動作します。
かんたコードを貼り付けたら作業完了です。
loopタグが消えているかを確認しましょう。
【備考】loop以外のvideoタグ要素
今回紹介したloop以外にもvideoタグがサポートしている属性を一部紹介します。
| 属性 | 説明 |
|---|---|
| poster | 動画サイズがデカイ、ネット環境が貧弱。。動画が表示されるまで何も表示されません。そんな時に使うのがこのposterです。動画が表示される前に表示する静止画像を指定できるオプション。 |
| autoplay | 動画を自動再生するオプション。 |
| muted | ミュート。つまり無音。動画再生時に動画の音声を無音にするオプション。 |
| width | 動画の幅を指定するオプション。 |
| height | 動画の高さを指定するオプション。 |
まとめ
カバーブロックの背景動画ループを停止する方法をサンプルコード付きで紹介しました。
停止する方法
- JavaScript
- jQuery
今回紹介した方法はテーマ本体のファイルを直接編集しない方法です。テーマのアップデートにも影響がないカスタマイズなので運用面で心配はありません。
カバーブロックはコーポーレートサイトやランディングページ制作でオシャレ度を上げる必須テクニックです。静止画像だけでなく動画を背景に設定することでインパクトが大きくなります。カバーブロックを使う際は、ぜひ今回のカスタマイズ方法を活用してみてください。
