Topページ(sp表示時)の右側に大きな余白が生まれてしまう。

SPにてTOPページにアクセスすると、右側に大きな余白が生まれてしまいます。

スクロールしある箇所に到達すると余白が消え、リロードするとまた余白ができます…。

下層ページでは同様の問題は起きておりません。

該当URL:https://gift-the-connrod.jp/(SPでアクセスしてください)

使用テーマ:Empire (https://pixelunion.net/products/empire)

これまでに行ったことは以下になります。

①テーマ提供会社への問い合わせ

テーマの提供元へ問い合わせし、確認をしてもらいました。

調査の結果、テーマ側の問題ではないと返答をもらいました。

②似たような事例の確認・調査

コミュニティにて似たような現象を相談されているQ&Aを見つけ、検証ツールから確認をしてみたのですが、原因となっているセクションなどは見つけられず…。

https://community.shopify.com/post/1802849

ちなみに、外部に頼らずに非エンジニアのみで内製して作っております…。

原因や解決方法など、ご助言いただけると大変ありがたいです。

@tm_106

ご質問いただいている、SP時に右側に余白が出る件ですが、有料テーマのため出力されているHTMLからの推測となりますが、考えられる原因としましては下記youtubeの動画表示設定で横幅を560pxで表示しようとしているため、初期表示時に右側に余白が出てしまっているのではと思われます。

対象のコード

上記コードを下記のように変更されましたら、問題が解決するかもしれません。

実際の検証はできておりませんので、問題が解決しない場合やPCでの見た目に影響が出る場合もありますので、その際は元に戻していただければと思います。

ご参考まで。

(キュー小坂)

ありがとうございます。

試してみたところ、余白がなくなり、PCでも問題なく表示できました。

iframeをYoutubeからそのままコピペしていたのですが、全く盲点でした…。

ご助言いただきありがとうございました!!