PC商品ページのレイアウトが左にずれる問題について

Question

PC商品ページで横長の大きめの動画を入れると
ヘッダ、商品説明、レフトナビごと左に寄ってしまいます。
動画を小さく登録する以外に方法はありますでしょうか？
ご回答よろしくお願いいたします。

該当ページ例
https://item.rakuten.co.jp/kokage-shop/visor-cap/

Answer

ECマスターズの田中美帆です。

ご回答お待たせして申し訳ございません。

> PC商品ページで横長の大きめの動画を入れると
> ヘッダ、商品説明、レフトナビごと左に寄ってしまいます。
> 動画を小さく登録する以外に方法はありますでしょうか？

今回の場合に起きるページ崩れは
楽天の仕様のため、残念ですが、
動画を小さく登録する方法以外ですと、
商品画像のサイズを動画のサイズに合わせて
いただくようになります。

ただし、商品画像のサイズを変更すると、
全ページに適用されるためご注意ください。

代替案となりますが、
動画をGIF画像に変換して、
PC用販売説明文などに載せる方法は
いかがでしょうか。

アニメーション画像のため、
動画のように表示することが可能ですが、
尺が長い画像や色数が多い画像は
容量の都合上、画質が悪くなりやすいため、
注意が必要です。

また、外部リンク申請が必要にはなりますが、
YouTubeへ動画をアップロードし、商品ページに
リンクを貼り付ける方法はいかがでしょうか。

そのままYouTubeへのリンクを貼り付けると
ユーザーの目に留まりづらいため、

クリックで動画再生ができそうな
サムネイル画像などを用意してYouTubeへ
リンクさせると、擬似的に動画を載せてるように
表示できるかと存じます。

直接的な解決ができず申し訳ありませんが、
上記の方法をご検討くださいませ。