YouTube動画を埋め込むと、スマホで閲覧した時に画面からはみ出る

WordPressにYouTube動画を埋め込むと、スマホで閲覧した時画面内に収まっておらず、横に大きくはみ出してしまっています。
改善のための自分用覚え書きです。

記事内の記述

埋め込みたい動画のURLが

だとすると、下のコードの「XXXXXXXXXX」の部分を「YtjTsWl8Yng」に書き換える。
私は使用しているテーマの都合上クラシックエディタを利用しているので、右上の「テキスト」をクリックして、そこに書く。

<div class="videowrap"><iframe src="https://www.youtube.com/embed/XXXXXXXXXX" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

【注意】
✕ https://www.youtube.com/watch?v=
◯ https://www.youtube.com/embed/

レスポンシブ対応するためのCSSを追加

管理画面 > 外観 > カスタマイズ > 追加CSS
ここに以下のコードを記述

.videowrap {
position: relative;
width: 100%;
padding-top:60%;
}
.videowrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

できた！🙌
これ、Google Mapの埋め込みにも使えますね。

そういえばバイラモスって何……！？ってググったら、

バイラモス（Bailamos）とは、スペイン語で「一緒に踊ろう」の意味である。

だって。💃🕺