WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法

WordPressでブログ記事を作成しているとYoutubeの動画やGoogleMapをブログ記事に埋め込むことがあると思います。

しかし、Youtubeの動画やGoogleMapはただそのまま埋め込みをしてしまうと、PCから見た時は正常でもスマホから見ると大きく横にはみ出してしまったりして非常に見栄えが悪いです。

そこで今回はこうしたYoutubeの動画やGoogleMapをWordPressブログ記事に埋め込んだ時にキレイに、しかも超簡単にレスポンシブ対応にする方法について紹介をしてみました。

今の時代、ほとんどの方がスマホからアクセスをしてきてくれているはずですので、そうした方たちのためにもしっかりと対応をしていきましょう！

Contents

1 WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法
- 1.1 WordPressでYoutubeをレスポンシブで埋め込む方法
- 1.2 WordPressでGoogleMapをレスポンシブで埋め込む方法
2 まとめ：レスポンシブにしたほうが絶対にオススメ！

WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法

WordPressでYoutubeの動画やGoogleMapをレスポンシブで埋め込むための順序は以下の通りです。

追加CSSにYoutubeとGoogleMapのレスポンシブコードを入れる
プラグインの”AddQuicktag”でショートコードを登録
記事投稿画面で”AddQuicktag”のショートコードを呼び出して使う

プラグインの”AddQuicktag”をインストールして有効化しておく必要があるので、まだの方は以下の記事を見てインストールをして下さい。

⇒　AddQuicktagの設定方法と使い方｜ショートコードを簡単登録

それではここからはYoutubeとGoogleMapで方法を分けて解説をしてきます。（どっちもやりたい方は同時並行で設定しちゃって下さい）

WordPressでYoutubeをレスポンシブで埋め込む方法

追加CSSにYoutubeのレスポンシブコードを入れる

まずはWordPressの「外観」⇒「CSS編集」⇒「追加CSS」を押します。

追加CSSの部分に以下のコードをコピペして貼り付けましょう。

.youtube-responsive{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube-responsive iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

こんな感じで貼ればOKです。

貼り終わったら「保存して公開」を押します。

プラグインのAddQuicktagでショートコードを登録

それができたら今度はWordPressメニューの「設定」⇒「AddQuicktag」から今追加CSSに追加したコードを記事投稿画面で使えるようにしていきます。

まだ、AddQuicktagをインストールしていない場合は以下の記事を参考にしてみて下さい。

⇒　AddQuicktagの設定方法と使い方｜ショートコードを簡単登録

そして、ショートコードを追加していきます。

画像の中で赤枠で囲ってある部分に以下の情報を入れてあげて下さい。

ボタン名：Youtubeレスポンシブ
開始タグ：<div class=”youtube-responsive”>
終了タグ：</div>

右側のチェックボックスは全てチェックを入れましょう。（一番右のチェックを押せば全てチェックされます）

「最後に変更を保存」を押します。

これで準備完了です。

記事投稿画面でAddQuicktagのショートコードを呼び出して使う

それではここからはYoutubeの動画をブログ記事に埋め込んでいきます。

まず埋め込みたいYoutubeの動画のページにいって動画説明欄の上にある「共有」から「埋め込みコード」を選んでそれを全てコピーしましょう。

記事投稿で動画を埋め込む時は、埋め込みコードを

<div class=”youtube-responsive”> ～ </div>

で括ってあげます。

テキストモードにすると先程AddQuicktagで登録したショートコードがあるので、動画を埋め込みたい場所でそれを押しましょう。

すると先程登録したショートコードが出てくるので今度はその次に、Youtubeの埋め込みコードを入れてあげます。

そして、最後にもう一回ショートコードのボタンを押して終了タグで囲めば完成です。

この最後の「終了タグ」を忘れがちですが、これを入れてしっかりとコードを閉じてあげないとダメなので忘れずに入れてあげましょう。

うまくできるとスマホから見た時にこんな感じになります。

WordPressでGoogleMapをレスポンシブで埋め込む方法

追加CSSにGoogleMapのレスポンシブコードを入れる

GoogleMapでもYoutubeと同じようにまず追加CSSにコードを入れていきます。

以下のコードをコピペしましょう。

.ggmap-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap-responsive iframe,
.ggmap-responsive object,
.ggmap-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}