Youtube,Googlemap,埋め込み,レスポンシブ

ブログにYouTubeやGooglemapの埋め込みを利用する機会も多いと思いますが、PC上では問題がなくても、スマホで見ると動画や地図が画面からはみ出してしまっていたり、縦横比がおかしくなってしまっていることがあると思います。

これは、動画が地図の埋め込みコードがレスポンシブに最適化されていないためです。

これでは、コンテンツをきちんと見てもらえず、すぐに離脱されてしまう恐れがありますので、文章などのレイアウトや広告だけではなく、こういった埋め込み系のコンテンツもレスポンシブ対応していくのがベストですね^^

今回は、YouTubeやGoogleMapなど埋め込みをCSSでレスポンシブ対応するやり方をご紹介します。

 

YouTube動画のレスポンシブ対応埋め込み方法

まず、YouTubeが提供している埋め込みコードを動画ページの『共有>埋め込みコード』から取得します。

YouTube,埋め込み,レスポンシブ

 

WordPressブログにYouTube動画を埋め込むには、他にも『動画URLを投稿エディタに貼り付けるだけ』というめちゃくちゃ簡単なやり方があるのですが、レスポンシブ対応したい場合はこの『埋め込みコード』が必要になりますので、必ずYouTubeの動画ページから埋め込みコードを取得してください。

REF:WordPressブログでYoutubeの埋め込み動画を利用する方法とメリットや注意点

 

■ CSS

まずはCSSコードを記述します。
スタイルシートに以下のコードを貼り付けます。

 

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

 

■ HTML

投稿エディタに動画を埋め込むHTMLですが、単に取得した埋め込みコードを、
<div class=”youtube-responsive”> ~ </div>
で括るだけです。

 

このように↓

<div class="youtube-responsive">
<iframe width="640" height="480" src="https://www.youtube.com/embed/oVXe2RVerxQ" frameborder="0" allowfullscreen></iframe>
</div>

 

ここではclass名を『youtube-responsive』にしていますが、この部分の名前は任意で設定することができます。
もし変更した場合は、前述のCSSの『youtube-responsive』のところも同じように変更しておいてください。

こうすることでこのように↓レスポンシブ対応に^^
縦横比もバッチリですねー。

 

 

GoogleMapの埋め込みもレスポンシブ対応に!

同じようにGoogleMapの埋め込みもレスポンシブ対応してみましょう。
要領は全く同じです。

GoogleMapを開いたら、左上のメニューから『地図を共有または埋め込む』を選択します。

GoogleMap,埋め込み,レスポンシブ

 

すると、このようなダイアログが開くので、『地図を埋め込む』タブを選択。
埋め込みコードが表示されているので、これを取得します。

GoogleMap,埋め込み,レスポンシブ

 

■ CSS

YouTube動画埋め込みと同じくスタイルシートに次のコードを記述します。

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

 

■ HTML

そして、こちらも同じく投稿エディタのHTMLはこちらを記入。

 

<div class="googlemap-responsive">
<iframe width="640" height="480" src="https://www.youtube.com/embed/oVXe2RVerxQ" frameborder="0" allowfullscreen></iframe>
</div>

 

これで、レスポンシブ対応のGoogleMapの埋め込みができましたね^^

 

まとめ

CSSを使えば、とても簡単にYouTube動画やGoogleMapの埋め込みをレスポンシブ対応にすることができます^^

最初にCSSをスタイルシートに書き込んでおけば、あとは投稿の度に

 

<div class=”youtube-responsive”> 埋め込みコード </div>

を書いていけばいいだけなのですが、一回一回このタグをつけていくのは少々面倒ですよね。

ですので、『AddQuicktag』プラグインを用いて、ワンクリックでこのタグを付けれるように設定しておくといいですね。

AddQuicktagの設定方法はこちらも参考にしてみてください~
REF: AddQuicktagでタグ入力を簡単に!設定方法と使い方