目次
Swellメインビジュアルの動画をループさせない方法
Swellでwebサイトを制作するときに、いろいろ調べてカスタマイズした方法を備忘録としていきたいと思います。
今までは、練習で作ったサイトを見直してカスタマイズ方法をコピーしていましたが、
Naoあのサイトを作ったときのCSSってなんだっけ？
英語の単語帳のようにまとめてあれば、いざ使いたいときに便利かなと思いました。
今回は、メインビジュアルの動画をループさせない方法がわかったので、またほかのサイトを作成するときに思い出せるよう残しておきたいと思います。
当サイトのメインビジュアルのために作った動画
Canvaで作成しました。
Swellのメインビジュアルに設定
ダッシュボードの【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】から設定します。
【動画の設定】をして、保存してから確認をします。
すると・・・。
動画はずっとループしてしまします。
ちょっと気になります。
そこで
動画のループ(繰り返し)を解消する
動画のループを解消する方法は下記です。
コードを追加
手順
「外観」→「テーマファイルエディター」をクリック
手順
「functions.php」をクリック
手順
コードを追加する
これで無事、ループされなくなりました。
追加するコードは下記の通りです。
add_action( ‘wp_footer’, function () {
if (is_home() || is_front_page()) { ?>
<script type=”text/javascript”>
element = document.querySelector(‘.p-mainVisual__video’);
element.removeAttribute(‘loop’);
</script>
<?php } } );
まとめ
こちらのサイトを引用させていただきました。
メインビジュアルに簡単に動画を設置できるSWELL。
ループをさせないことで、一ランク上のイメージになったではないでしょうか？
