たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法 | TechMemoTweet ブログに YouTube の動画を埋め込んでいる人は多いと思います。また、最近ではサイトにレスポンシブデザインを採用している人も多いと思います。WordPress でもレスポンシブに対応したテーマが多くリリースされていますね。 レスポンシブデザインのブログに YouTube 動画を埋め込むと、スマートフォンでサイトを見た時に動画が画面からはみ出てしまうことがあります。 埋め込みコードを使って YouTube の動画を埋め込んだ場合、iframe を使って動画を表示します。この iframe の幅が 560px などに指定されているためスマートフォンで表示した時に画面からはみ出してしまうのです。 そんな YouTube 動画をレスポンシブに対応させる方法として、div などで動画のコードを囲って CSS クラスを付与して調整する方法がよく紹介されていますが、毎回 HTML ソース
