主題: スマートフォン表示時、TOPページ右側に大きな余白が出る不具合。特定位置までスクロールすると一時的に消えるが、リロードで再発。下層ページでは発生せず。テーマ（Empire）提供元はテーマ起因ではないと回答。
原因・論点: TOPに設置したYouTube埋め込みiframeがwidth=560等の固定幅で初期表示され、画面幅を超えて横スクロール領域を作り余白が生じている可能性が高い。提示コード（iframeのwidth/height指定あり）が根本要因と指摘。
対応策: iframeのwidth/height属性を削除し、srcとallow系属性、allowfullscreenのみを残してレスポンシブ表示に変更。
結果・現状: 変更後、余白は解消しPC表示にも問題なし。具体的なコード修正が有効で、議論は解決済み。
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からそのままコピペしていたのですが、全く盲点でした…。
ご助言いただきありがとうございました！！