youtubeの動画をレスポンシブ対応

この記事は2020年9月15日に公開した別ブログから移設したものです。

youtubeの動画をwebサイトに貼り付けるときに「埋め込み」でコードを生成します。が、これ、レスポンシブ対応がされていません。なので、自分でcssを追加してあげる必要があります。

参考記事：

この記事の通りだと、横幅が最大になってしまうので、すこし改修しました。

表示したいサイズはアスペクト比を守らないとおかしなサイズになります。

わたしは数字の計算をしたくなかったので、youtubeで埋め込みコードを生成して、そこのサイズ通りの画像をphotoshopで作成→画像サイズを変更をして、でてきた数字を入力しました。