Shopifyで商品ページでホバー時に商品動画を自動再生する方法

概要

このブログ記事では、ShopifyのDawn 2.0テーマを使って、コレクションページと商品ページで商品の上にカーソルを合わせたときに短い商品動画を自動再生する方法を紹介します。動画はミュートにする必要があるので注意してください。

1. 達成したいこと

• 商品の上にカーソルを合わせると、１番目に登録した商品メディアの動画が再生されるようにする。

2. 手順

2.1 Dawn 2.0 テーマのコード編集

Dawn 2.0 テーマの以下のファイルを編集します。

• base.css
• component-card.css
• card-product.liquid

2.1.1 base.css の編集

base.cssで以下のコードブロックを見つけてください。

.media.media--hover-effect > img + img

このコードブロックを以下のように置き換えてください。

.media.media--hover-effect > img + img,
.media.media--hover-effect > img + video {
  opacity: 0;
}

2.1.2 component-card.css の編集

component-card.css で以下のコードブロックを見つけてください。

.card__media .media img

このコードブロックを以下のように置き換えてください。

.card__media .media img,
.card__media .media video {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

2.1.3 card-wrapper:hover の編集

card-wrapper:hoverで以下のコードブロックを見つけてください。

card-wrapper:hover .media.media--hover-effect >img+img

このコードブロックを以下のように置き換えてください。

.card-wrapper:hover .media.media--hover-effect > img + img,
.card-wrapper:hover .media.media--hover-effect > img + video {
  opacity: 1;
  transition: transform var(--duration-long) ease;
  transform: scale(1.03);
}

2.1.4 card-product.liquid の編集

card-product.liquid で以下のキーワードを見つけてください。

motion-reduce

その付近にある、2つ並んだimgタグのうち、下の img タグを以下のコードに置き換えてください。

{%- if card_product.media[0] != null -%}
                {% liquid
                assign alternateMediaIsVideo = false
                if card_product.media[0].media_type == 'video'
                assign alternateMediaIsVideo = true
                endif
                %}
                
                {% unless alternateMediaIsVideo %}
                <img
                srcset="
                {%- if card_product.media[0].width >= 165 -%}{{ card_product.media[0] | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_product.media[0].width >= 360 -%}{{ card_product.media[0] | image_url: width: 360 }} 360w,{%- endif -%}
                {%- if card_product.media[0].width >= 533 -%}{{ card_product.media[0] | image_url: width: 533 }} 533w,{%- endif -%}
                {%- if card_product.media[0].width >= 720 -%}{{ card_product.media[0] | image_url: width: 720 }} 720w,{%- endif -%}
                {%- if card_product.media[0].width >= 940 -%}{{ card_product.media[0] | image_url: width: 940 }} 940w,{%- endif -%}
                {%- if card_product.media[0].width >= 1066 -%}{{ card_product.media[0] | image_url: width: 1066 }} 1066w,{%- endif -%}
                {{ card_product.media[0] | image_url }} {{ card_product.media[0].width }}w
                "
                src="{{ card_product.media[0] | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt=""
                class="motion-reduce"
                loading="lazy"
                width="{{ card_product.media[0].width }}"
                height="{{ card_product.media[0].height }}"
                >
                {% else %}
                {{
                  card_product.media[0]
                  | video_tag:
                  controls: false,
                  muted: true,
                  loop: true,
                  autoplay: true,
                  image_size: '1066x',
                  class: 'motion-reduce'
                }}
                {% endunless %}
                {%- endif -%}
            </div>
          </div>
        {%- endif -%}

解説

1. 最初に card_product.media[0] が null でないかチェックします (nullの場合はメディアがないので処理をスキップ)
2. メディアのタイプが video かどうか判定し、alternateMediaIsVideo 変数に代入します。
3. alternateMediaIsVideo が false の場合 (つまりメディアが画像の場合)
   • card_product.media[0] を元に、さまざまなサイズ (width) の画像へのURLを生成します。
   • img タグを使って、サイズの違う複数の画像を srcset 属性で指定し、端末の幅に応じて適切な画像を表示させます。
4. alternateMediaIsVideo が true の場合 (つまりメディアが動画の場合)
   • card_product.media[0] を元に、自動再生、ミュート、ループ再生などのオプションを指定して動画タグ (video_tag) を生成します。

コードの詳細

• {%- if ... -%}: 条件分岐の開始 (endif で終了)
• {% assign ... = ... %}: 変数の代入
• {{ ... }}: 変数やフィルタの結果を出力
• card_product.media[0]: 商品のメディア情報の配列の先頭要素 (1番目のメディア)
• .media_type: メディアのタイプ (“image” or “video”)
• .width: メディアの幅 (ピクセル)
• .height: メディアの高さ (ピクセル)
• image_url: フィルタを使ってリサイズされた画像のURL を生成
• video_tag: フィルタを使って動画タグを生成
• controls: 動画のコントロールバーの表示 (falseで非表示)
• muted: 動画の音声をミュートにする (trueでミュート)
• loop: 動画をループ再生にする (trueでループ)
• autoplay: 動画を自動再生にする (trueで自動再生)
• image_size: 動画のプレビュー画像のサイズを指定
• srcset: <img> タグで、サイズの違う複数の画像のURL を指定
• sizes: <img> タグで、端末の幅に応じた画像の表示サイズを指定
• alt: 画像の説明文 (空欄)
• class="motion-reduce": モーションの軽減に関するクラス (詳細は省略)
• loading="lazy": 画像の遅延読み込み (詳細は省略)

このコードは、商品のメインメディアが画像か動画かに応じて、適切なタグを使って表示するようにするためのものです。端末の幅に応じて適切なサイズの画像を表示させたり、動画の再生オプションを指定したりしています。

3. 注意点

• この方法では、動画に音声を載せられません。ブラウザは、音声付きの動画の自動再生をブロックします。

4. SEO対策

• 動画のファイル名とalt属性に適切なキーワードを含める。
• 動画のタイトルと説明文に適切なキーワードを含める。
• 動画のメタデータを適切に設定する。
• 動画サイトマップを作成し、Google Search Consoleに送信する。

まとめ

このブログ記事では、Shopifyでコレクションページと商品ページでホバー時に商品動画を自動再生する方法を紹介しました。