【コピペで簡単！】SWELLのヒーロー動画無限ループを制御する方法

2025年7月16日

こちらはCANVAで適当に作ったmp4動画です。（テンプレの文章変えただけです。）

こちらをSWELLテーマのヒーロー動画に設定すると、

デフォルトではこのように無限ループ再生になってしまいます。ループしても良いものであればいいんですが、サイトが重たくなるし、スパッと終わる動画にしたいですよね。（ちなみにきむらぼのHPではむしろループしてたいので制御してないです。）

これを制御するには、

<!-- ヒーロー動画ループ制御 -->
<script>
  window.addEventListener("load", function () {
    const video = document.querySelector('.p-mainVisual__video');
    if (video) {
      video.removeAttribute('loop');
    }
  });
</script>

コードの詳しい説明

このコードは、ページ読み込み完了後に .p-mainVisual__video というクラス名を持つ <video> 要素の loop 属性を削除する JavaScript（Vanilla JS） の処理です。

1. `window.addEventListener("load", function () { ... });`

意味：ブラウザがページのすべてのリソース（画像・CSS・JS・動画など）を完全に読み込んだ後に処理を実行するイベント。
DOMContentLoaded ではなく load を使っているのは、「動画（video要素）を含めて完全に読み込んでから操作したい」からです。

2. `const video = document.querySelector('.p-mainVisual__video');`

意味：クラス名 .p-mainVisual__video を持つ要素（この場合は <video> タグ）を1つ取得。
見つからなければ null になります。

3. `if (video) { ... }`

意味：要素が存在すれば処理を実行。
要素が存在しなければエラー回避のため何もしないようにしています。

4. `video.removeAttribute('loop');`

意味：<video loop> のように書かれている「ループ再生」属性を削除します。
これによって、動画が 1回再生されたあとに止まる ようになります。

<実際のHTML例と動き>

<video class="p-mainVisual__video" autoplay muted loop>
  <source src="movie.mp4" type="video/mp4">
</video>

この動画は loop 属性があるため本来はループ再生しますが、このJavaScriptが走ると…

👉 loop 属性が削除される
👉 動画は 1回だけ再生して止まる

という動作になります。

こちらのコードをコピーしていただき、

[カスタマイズ < 高度な設定 < headタグ終了直前に出力するコード</head>直前]

にコピペします。

以上です。めちゃくちゃ簡単ですよね。

1分ほどの動画にて詳しく解説しています↑

とても簡単なのでぜひCANVAで作った動画などを無限ループさせたくない人は試してみてください。

うまくいかない場合は、コードに余分にスペースが入ってしまっていたり、コメントアウトがうまく機能していない可能性があるので、スペースを確認したり、<!– ヒーロー動画ループ制御 –>部分を消してみたりしてください、

あとはキャッシュの問題もあるかもしれないので、キャッシュクリアやリロードも試してみてください。

ちなみに動画のサイトは最近から作り始めている、パラレルワークについてのブログです。まだデザインすらも決まっていない段階なのでまだまだ公開は先だと思いますが、

パラレルワークやりたい人多いみたいなので自分のやっていることが参考になればと思っています。

そのうち公開するのでお楽しみに！

よかったらシェアしてね！

URLをコピーしました！

木村水癸きむらぼ代表

#AI DigitalMarketing Creator
――デジタルマーケティングを身近に。
＼SEO×AI（LLMO）の知識を強化中！／

この著者の記事一覧へ

【コピペで簡単！】SWELLのヒーロー動画無限ループを制御する方法

1. `window.addEventListener("load", function () { ... });`

2. `const video = document.querySelector('.p-mainVisual__video');`

3. `if (video) { ... }`

4. `video.removeAttribute('loop');`

アーカイブ

カテゴリー

京都PR

所属団体

関連リンク

掲載リンク

ソーシャルメディア

クラウドソーシング

【コピペで簡単！】SWELLのヒーロー動画無限ループを制御する方法

1. window.addEventListener("load", function () { ... });

2. const video = document.querySelector('.p-mainVisual__video');

3. if (video) { ... }

4. video.removeAttribute('loop');

アーカイブ

カテゴリー

関連記事

京都PR

所属団体

関連リンク

掲載リンク

ソーシャルメディア

クラウドソーシング

1. `window.addEventListener("load", function () { ... });`

2. `const video = document.querySelector('.p-mainVisual__video');`

3. `if (video) { ... }`

4. `video.removeAttribute('loop');`