WordPress Youtubeの埋め込みをレスポンシブに

HPをレスポンシブで作成した際、埋め込んだYoutubeの大きさが変わらずスマートフォンで見ると横にはみ出てしまう。

かといってiframeのwidthを100%にしても高さがそのままなので縦に長くなってしまう。

何とか縦横比を保ったままレスポンシブにならないかとネットを探していたらコードを見つけて実装。

なんとCSSとdivだけで実現できました。マジか。

まずCSSに記述

そしてHTMLにて

を記述。

これで実装完了。