YouTube埋め込みの問題点

YouTubeをWebサイトに入れたい時、iframeの埋め込みが選べますよね。



しかしこのコードをそのまま使うと、スマホで見た時に、正方形に表示されます。

これはこれでいいのですが、サイトや動画によっては端が見切れることがあり、なんだか微妙。

こんな感じで。


また、PCで見た時に、ページの中央に動画を寄せたいこともありますが、このままだと左寄せになっています。



コード

このようにしました。
iframeの一行は、YouTubeからコピペしたものをそのまま貼ったらOKです。


メディアクエリを使って、
PCの時は、幅560pxの動画を中央寄せで表示して、
スマホの時は横幅いっぱいに動画が表示されるようにしました。

14行目からのレスポンシブ対応コードについては、メディアクエリを使わず、全体に適用してもいいです。

自分が作っていたサイトでは、画面いっぱいに動画が表示されてしまい、PCで見るにはさすがに大きすぎだったので、このようにしました。



まとめ

動画の埋め込みのレスポンシブ対応方法について書いてみました。
コードは自由にコピペしてお使いください。

もっといい書き方があれば、ぜひコメントください！