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

日本語 ディスカッション 技術的なQ＆A
, ,

Topic summary

Dawnテーマで動画（MP4）の自動再生を実装する方法についての質問と解決策の共有。

提供された解決策:

  • Qcoltdが新しいセクション用のLiquidコードを提供（video-qcoltd.liquid）
  • video_tagフィルターを使用し、autoplay、loop、muted等のパラメータを設定
  • 動画は幅100%でデフォルト表示

追加のカスタマイズ相談:

  • 動画の幅を80%に調整したい場合は、カスタムCSSでmarginとwidthを設定
  • YouTubeのURL設定や表示速度の最適化も相談可能

縦幅調整の問題:

ステータス: 解決済み

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
2

@gith 様

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

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

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

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

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

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

  {{
    section.settings.video
    | video_tag:
      image_size: '1100x',
      autoplay: true,
      loop: true,
      controls: false,
      muted: true
  }}

{% 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を設定できるようにしたい、

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

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

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

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

ご参考まで。

(キュー田辺)

2 Likes