カバーブロックの動画ループを停止する方法｜【WPグーテンベルグ編】

2023 4/26

2023年4月26日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

【ACF】カスタムフィールドを絞り込み検索|VK Filter Search Proプラグインでカスタマイズを実装

初心者

カバーブロックの動画ループって止まらないの？

止まります。

本記事ではWordPressカバーブロックの動画ループを止める方法を解説します。難しいカスタマイズではありませんので、ぜひチャレンジしてみてください。

参考

WordPress公式サイト：Cover Block

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【基礎知識】なぜカバーブロックの動画は繰り返し再生するのか？

カバーブロックの動画ループを止めるカスタマイズの前に、なぜカバーブロックの動画が繰り返し再生するのかを解説します。

かんた

ループの原因を理解するとループを停止するカスタマイズの意味が理解できます。

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	動画の高さを指定するオプション。

videoタグのオプション

参考