今回は、WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法をご紹介します。 なお、この方法はiframeをWebサイトに埋め込む場合に利用可能なので、Vimeoやその他のサービスでも同様に扱うことができます。 YouTube動画の埋め込みコードの取得方法 YouTubeの埋め込みコードは、動画再生画面の「共有」から「埋め込む」を選択すると、下記のように埋め込み用のコードを表示することができます。 生成された埋め込みコードは、ライブラリやプラグインを入れなくても、HTMLに貼り付けるだけでWebサイト上に簡単にYouTube動画を表示することが可能です。 YouTube動画埋め込みの表示例 YouTubeの埋め込みコードをそのまま貼り付けると、上記のように画面からはみ出してしまったり、width:100%を指定すると黒い空白が生まれてしまったりします。 表示幅が固定されている