TOPページの動画を自動再生したい

[gith]

Dawnテーマのテンプレートで動画（MP.4）を自動再生したいのですが、

コード編集でどこをどのように設定すれば良いか分からず、、

設定方法等詳しい方いましたらご教示いただけますと幸いです。

[Qcoltd]

@gith 様

他の方からも、動画の自動再生ができない、というご質問が多いので、

動画の自動再生をするシンプルなセクションを作ってみました。

新しいセクションを作成し、

下記のコードを貼り付けて保存してください。

(「コード編集」画面にて「セクション > 新しいセクションを追加うする」で、liquidファイルを作ります。liquidのファイル名は、なんでも良いです。思いつかない場合は、仮に弊社の名称を取って、video-qcoltd.liquid でも良いです。)

{%- style -%}
  .qcoltd-video-auto-loop-wrap, .qcoltd-video-auto-loop-wrap video {
    width: 100%;
  }
{%- endstyle -%}

<div class="qcoltd-video-auto-loop-wrap">
  {{
    section.settings.video
    | video_tag:
      image_size: '1100x',
      autoplay: true,
      loop: true,
      controls: false,
      muted: true
  }}
</div>

{% schema %}
{
  "name": "動画(自動再生)",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "t:sections.video.settings.video.label"
    }
  ],
  "presets": [
    {
      "name": "動画(自動再生)"
    }
  ]
}
{% endschema %}

新しいセクションを追加後、

テーマの「カスタマイズ」画面で、

トップページにセクションを追加します。

先ほど新たに追加した「動画(自動再生)」が追加候補の一番下にあるのでお選びください。

かなりシンプルにしましたので、

ストアにアップロードしたら動画のみ設定可能です。

画面幅いっぱいに広がるように作りましたが、

気になる場合は、「カスタムCSS」で、

.qcoltd-video-auto-loop-wrapのwidthを調整し、marginを設定してください。

例えば、widthを80%にするのであれば、下記のようになります。

.qcoltd-video-auto-loop-wrap {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

シンプルにする過程で、

遅延読み込みも外してしまいましたので、

ページの表示スピードが気になるようでしたらご相談ください。

もし、

YouTube動画のURLを設定できるようにしたい、

デスクトップとモバイルで見た目を変更したい、

などのご要望がある場合も、

同様にお気軽にご相談ください。

※ 相談いただいても必ず対応できるわけではないことご承知おきください。

ご参考まで。

(キュー田辺)