YouTubeの動画をサイトに埋め込む時、そのままだとスマホで見切れてしまう件
公開日:2024/11/25
普通にYouTubeの動画のタグを埋め込むと、PCだと気になりませんが、スマホだと横が見きれます。
タグをまんま入れ込んだ場合：
ね。見切れてますよね？
どうしてこうなるかというと、YouTubeの「共有」から埋め込みコードをコピーして貼り付けされているかと思いますが、この<iframe>には横幅（width）が560px固定で設定されているため、それ以上縮まることがありません。
そのためスマホで見たとき（主に画面幅375px）に、見切れてしまったり、右側に不要な余白が空いてしまったりするのです。
こんな感じですね。
そこで弊社ではこれを回避するために、YoutTube動画を埋め込む際は、「youtube-wrapper」というクラス名をつけた<div>要素で、<iframe>を囲むようにしています。
そうすれば自動的に画面幅に応じて横幅が変動するようになります。
こんな感じです（PCだと見た目は変わりません）。
どうです、スマホで見てもYouTubeの部分が見切れてないですよね？
こんな見え方になっているはずです↓
YouTubeの動画をサイトに貼り付けるときは注意してください。
