興味があり調査してみました。
①コードを入れる場所は合っているでしょうか。
掲載いただいているコードを、
私の開発環境で試したところ、
商品ページでも商品編集ページでも、
動画の自動再生を確認できました。
(商品編集ページで、商品説明にコードを追加しました。)
コードを入れる場所は合っている(間違っていない)と思います。
②どうすれば動画を再生ボタンを押さずに再生させますか。
③動画画面のサイズをどう調節すればいいですか。
もし、商品ページをiOSのブラウザで確認されている場合、自動再生には
playsinline
というアトリビュートが必要になります。
また、比較的時間が短い動画である場合、自動でloopさせないと自動再生できていないように見えてしまうかもしれません。その場合は、
loop
というアトリビュートを追加します。
大きさについては、
DOM構造によりますが、おそらく下記を追加して、
親要素の大きさに準じるようにすれば程よいサイズになるのではないかと思います。
style="width: 100%;"
まとめると、下記のようになります。
④動画を入れたことにより、商品ページの読み込み速度は落ちますか。落ちる場合は対処法を教えていただきたいです。
使用される動画によるのですが、
おそらく、遅くはなっても人間が感覚的に分かるほどの速度の劣化はないはずです。
まず、
動画をShopifyにアップロードされているようでしたら、
Shopifyが品質を保ちつつデータサイズを圧縮してくれますので、
よほど巨大な動画でなければデータサイズが小さくなります。
また、
最近のブラウザは、
videoタグを使用している場合、
いきなり動画ファイル全てをダウンロードせずに、
少しずつダウンロードします。(範囲リクエストに対応していています。)
このように速度劣化を閲覧者に感じさせない技術があり、
実測値はもちろん遅くなると思いますが、
閲覧者が体感できるほど遅くはならないだろう、
と考えています。
ご参考まで。
(キュー田辺)