スマホとPCの表示がうまくいかないので教えてください。

Question

実現したいこと

ECキューブ内でECサイトを制作しています。
以下のYouTubeのリンクをはっているのですが、
左寄せに掲載したいのですがうまくできません。

<div class="youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/yA0qs8D7IJw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

以下のようにleftを入れてみたところPCではうまく表示されるのですが、
スマホ表示は横にはみででしまいます。htmlのコードでスマホにもうまく表示する方法をご教示いただけたらと思います。
よろしくお願いいたします。

<div class="left"><iframe width="560" height="315" src="https://www.youtube.com/embed/yA0qs8D7IJw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

classyoutubeとleftがどんな内容なのかわかりませんがPC画面だととりあえず意図するように動いているということなので、推測のまま話を進めていきます。

スマホ表示は横にはみででしまいます

スマホ画面の横幅を埋め込んでいる動画が超えてしまっているということでしょうか。
横幅が、width=560で固定されているため横幅560px未満の解像度の液晶で表示する際に今回のようにうまく表示されない様になってしまいます。

そのため、

.youtube iframe{ max-width="100%" }/*だめなら90%など数字を下げる*/

のようにすればとりあえずはみ出なくはなると思います。
親要素のCSSの内容によってはより細かく調整をしていく必要があります。

Comments

[aki_aki12]

ありがとうございます！設定してみます！