Shopifyのvideo_tagでposterの画像サイズを変更する

何度か調べてしまったのでメモとして。

実現したいこと

• Shopifyのvideo_tagフィルターで出力する際に、posterの画像サイズを変更する

発生する問題

{{ section.settings.video | video_tag }}

上記のようなコードで以下のようなコードが出力されます。

<video playsinline="playsinline" preload="metadata" aria-label="動画の代替テキスト" poster="//cdn.shopify.com/s/files/1/0000/files/preview_images/000000.thumbnail.0000_small.jpg?v=000000">
  <source src="https://cdn.shopify.com/videos/c/vp/0000/0000.mp4" type="video/mp4">
  <img alt="動画の代替テキスト" src="//cdn.shopify.com/s/files/1/0000/files/preview_images/000000.thumbnail.0000_small.jpg?v=000000">
</video>

上記の以下の部分が問題で、デフォルトでは末尾に_smallがついており、100pxサイズの画像が設定されてしまい、動画を大きなサイズで表示させるとボケてしまいます。

poster="//cdn.shopify.com/s/files/1/0000/files/preview_images/000000.thumbnail.0000_small.jpg?v=000000"

上記のサイズを変更してposterをボケないようにしたいのが目的です。

対応方法

• Liquid filters: video_tag

上記を参考に以下のようにして対応できました。

{{ section.settings.video | video_tag: image_size: '1100x' }}

上記で以下のようなパスで出力されます。

poster="//cdn.shopify.com/s/files/1/0000/files/preview_images/000000.thumbnail.0000_1100x.jpg?v=000000"

結び

何も設定しない場合はlargeなどを初期にしてくれても良いのではと思わないでもありません。