【発注者向け】YouTubeの動画をサイトに埋め込む時、そのままだとスマホで見切れてしまうぞ！

最終更新日:2024/12/22   公開日:2024/11/25

普通にYouTubeの動画のタグを埋め込むと、PCだと問題ありませんが、スマホだと横が見切れるってご存じでしたか？

タグをまんま入れ込んだ場合：

今スマホで見ている方は見切れているはずです。PCでスマホでの見え方を表示するとこうなります。

どうしてこうなるかというと、YouTubeの「共有」から埋め込みコードをコピーして貼り付けされているかと思いますが、この<iframe>には横幅（width）が560px固定で設定されているため、それ以上縮まらないためです。

そのためスマホで見たとき（主に画面幅375px）に、見切れてしまったり、右側に不要な余白が空いてしまったりするのです。

そこで弊社ではこれを回避するために、YoutTube動画を埋め込む際は、「youtube-wrapper」というクラス名をつけた<div>要素で、<iframe>を囲むようにしています（後述）。

そうすれば自動的に画面幅に応じて横幅が変動するようになります。

こんな感じです（PCだと見た目は変わりません）。

どうです、スマホで見てもYouTubeの部分が見切れてないですよね？

これは「youtube-wrapper」という要素に、CSSでレスポンシブに対応させるための指定をしています。弊社サイトでは共通CSSにこの指定を追記したので、弊社サイト内では、「youtube-wrapper」要素で囲むだけで自動的に変動する形にしています。

この辺は「普通の人」が自分でやるのはハードルが高いので、ホームページ制作会社に「YouTubeのタグをサイトに貼り付けたとき、スマホで見ても横幅が画面にぴったり収まるようにcssを処理して欲しい」と言えば大丈夫です。

YouTubeの動画をサイトに貼り付けるときは注意してください。