@do4nd81oko 様
貼っていただいたコードを拝見しますと、
おそらくご利用中のテーマはDawnで、
おそらく最新のバージョン(10)か比較的新しめのバージョンだと思いますので、
その前提で回答いたします。
Dawnをお使いなのであれば、
現状は下記のようになっているはずです。
1. 商品のメディアに動画ファイルを追加する
2. 商品詳細ページのメディア一覧部分に、動画が表示される
3. この動画は「画像」であり、再生ボタンが画像の中央に表示されている
4. この再生ボタンをクリックするとvideoタグが生成され、動画が再生される
ブラウザのdeveloper toolsやソース表示でHTMLを確認した際に、
templateタグの中にvideoタグを見つけることができると思いますが、
templateタグの中にある要素は、JavaScriptで操作するまで表示されません。
上記の「3」の段階で見えているのはあくまで動画のサムネイル画像です。
再生ボタンをクリックすることで、
templateの中のvideoタグを表示する、
という処理をJavaScriptで行っています。
では、どうすれば良いか、ですが、
あらゆる状況において問題がないカスタマイズを提案するのは大変なので、
何か問題が出る可能性があるが多くの場合問題ないだろうという方法を記載いたします。
まず、こちらのコードを、
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
endif
when 'video'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>
下記のようにします。(templateの閉じタグの下にvideoタグの出力を追加)
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
endif
when 'video'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>
{%- if media.media_type == 'video' -%}
{{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
{%- endif -%}
次に、
templateタグの少し上にあるこちらのコードを、
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- endif -%}
</span>
下記のようにします。(videoの時に、再生ボタンを表示しないようにします。)
{%- if media.media_type != 'video' -%}
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- endif -%}
</span>
{%- endif -%}
なお、
videoタグへのmutedの追加(muted: trueの追加)は不要なようです。
(liquidがautoplayがtrueであれば自動的にmutedを出力してくれるようです。)
問題がないとは言い切れないコード修正案で恐縮ですが、
参考になれば幸いです。
(キュー田辺)
