ワードプレスのレスポンシブ動画機能が搭載されていない場合の対処法です。
最新のワードプレスでは「動画」という機能があり、それを使用すれば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%;
}
以上で動画をホームページに埋め込み、かつレスポンシブで快適に見られるようになります。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
