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

THE THOR(ザ・トール)からSWELLへの移行手順を解説【テーマ切り替え時の注意点あり】
初心者

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

止まります。

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • 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属性を削除する方法を紹介していきます。

カバーブロックの動画ループを停止するカスタマイズ

カバーブロックの動画ループを停止するカスタマイズ

今回はJavaScriptとjQueryでvideoのループ属性をHTMLコードから削除する方法を解説します。

かんた

好きな方を試してみてください。

【JavaScript】loop属性を削除するサンプルコード

まずはJaveScriptでloop属性を削除するサンプルコードです。

<script type="text/javascript">
element = document.querySelector('.wp-block-cover__video-background');
element.removeAttribute('loop');
</script>
初心者

このままコピペでいいの?
どこに貼ったら動くの?

かんた

初心者の人なら「カスタムHTMLブロック」がおすすめ。
投稿内のどこに設置してもOK!

カスタムHTML
カスタム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タグ要素

今回紹介したloop以外にもvideoタグがサポートしている属性を一部紹介します。

属性説明
poster動画サイズがデカイ、ネット環境が貧弱。。動画が表示されるまで何も表示されません。そんな時に使うのがこのposterです。動画が表示される前に表示する静止画像を指定できるオプション。
autoplay動画を自動再生するオプション。
mutedミュート。つまり無音。動画再生時に動画の音声を無音にするオプション。
width動画の幅を指定するオプション。
height動画の高さを指定するオプション。
videoタグのオプション

まとめ

カバーブロックの背景動画ループを停止する方法をサンプルコード付きで紹介しました。

停止する方法

  • JavaScript
  • jQuery

今回紹介した方法はテーマ本体のファイルを直接編集しない方法です。テーマのアップデートにも影響がないカスタマイズなので運用面で心配はありません。

カバーブロックはコーポーレートサイトやランディングページ制作でオシャレ度を上げる必須テクニックです。静止画像だけでなく動画を背景に設定することでインパクトが大きくなります。カバーブロックを使う際は、ぜひ今回のカスタマイズ方法を活用してみてください。

SWELLランディングページの作り方

SWELL企業サイトの作り方

よかったらシェアしてね!
  • URLをコピーしました!
目次