ワードプレスのレスポンシブ動画機能が搭載されていない場合の対処法です。
最新のワードプレスでは「動画」という機能があり、それを使用すればYouTubeのURLをコピーするだけでレスポンシブ状態の動画を埋め込むことができますが、最新ではないワードプレスではレスポンシブで埋め込むにはCSSでの制御が必要となります。
まずはYouTubeの画面から埋め込みコードを取得します
ホームページに埋め込まれている動画の場合は、左下の「見る」ボタンをクリックします。
YouTubeの画面で「共有」をクリックします。
ポップアップが立ち上がりますので「埋め込む」をクリックします。
画面が遷移します。
赤枠のコードをコピーしてホームページに記述が必要となります。
右下の「コピー」という文字をクリックするとワンタッチで赤枠のコードのコピーが完了します。
HTML（ブログ投稿画面）の記述
ブログ投稿画面で「カスタムTHML」で記述をします。
投稿画面の「＋」ボタンをクリックします
「カスタムTHML」をクリックします。
YouTubeのコードをコピペするだけでも動画は見られますが、スマホ版だとはみ出してしまいます。
そこで、ひとつひとつの動画コードの前後に、以下の記述を入れる必要があります。
<div class="ggmap"> この間に先ほどコピーしたYouTubeコードを入れます </div>
実際にYouTubeのコードを入れるとこんな感じです。
CSSの記述
以下はCSSの記述となります。
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
以上で動画をホームページに埋め込み、かつレスポンシブで快適に見られるようになります。
