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

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

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

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

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

ご参考まで。

(キュー田辺)

[shizusaga]

こちら非常に有益なファイルを作っていただき、ありがとうございます！

一点ご質問させていただきたいのですが、動画の縦幅を少し短く調整したいため、CSSの『.qcoltd-video-auto-loop-wrap』クラスに対してheightを指定しても動画の縦幅が短くならなかったので、

『.qcoltd-video-auto-loop-wrap』の子要素のvideoタグに対して、heightを指定すると動画の縦幅が短くなるのですが、横の幅が全幅だった動画が短くなって全幅ではなくなってしまいます。

動画の横幅を全幅に保ちつつ、動画の縦幅を短くしたいのですが、その場合はどちらにCSSを当てればよろしいでしょうか？

お手数おかけしますが、ご回答いただければ幸いでございます。よろしくお願いいたします。

[Qcoltd]

@shizusaga 様

よくあるCSSテクニックのご紹介になってしまうのですが、

カスタムCSSに下記のように入力いただくとご希望の表示にならないでしょうか？

  .qcoltd-video-auto-loop-wrap {
    position: relative;
    height: 300px;
  }

  .qcoltd-video-auto-loop-wrap video {
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.qcoltd-video-auto-loop-wrapのheightをご希望の大きさにご変更ください。

ご参考まで。

(キュー田辺)

[shizusaga]

すいません、以前のご返信に返信したはずなのですが、投稿できていなかったようですm(_ _)m

こちら、ご回答をいただける前に、下記のURLのコードを引用することで、解決することができました！

https://umlaut.club/web/video_tag2

この度はご質問にお答えいただき誠にありがとうございました！