こちらは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で作った動画などを無限ループさせたくない人は試してみてください。
うまくいかない場合は、コードに余分にスペースが入ってしまっていたり、コメントアウトがうまく機能していない可能性があるので、スペースを確認したり、<!– ヒーロー動画ループ制御 –>部分を消してみたりしてください、
あとはキャッシュの問題もあるかもしれないので、キャッシュクリアやリロードも試してみてください。
ちなみに動画のサイトは最近から作り始めている、パラレルワークについてのブログです。まだデザインすらも決まっていない段階なのでまだまだ公開は先だと思いますが、
パラレルワークやりたい人多いみたいなので自分のやっていることが参考になればと思っています。
そのうち公開するのでお楽しみに！
