WordPressでYouTubeやInstagramのiframeをレスポンシブ対応にする方法

Instagram

以前、YouTubeのiframe要素をレスポンシブ対応にする方法については以下の記事で書きました。

Wordpressテーマなどでレスポンシブ対応のものを使用していたりすると、YouTubeなどiframeを使用した動画表示させたと...

ただ、この方法を使用した場合、Instagramのiframe要素の場合、縦横比率が違うので表示が崩れてしまいます。

  • YouTubeの縦横比率→0.5625:1
  • Instagramの縦横比率→1.2:1

という事で今回は、WordpressをカスタマイズしてYouTubeにもInstagramにもレスポンシブ対応する方法を紹介します。

photo by Beshr O

スポンサーリンク
レクタングル(大)広告

まずは普通にYouTubeのiframeをレスポンシブに

まずはYouTubeから対応していきます。前回のおさらいとなる内容です。

functions.phpの編集

functions.phpに以下を追記します。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/<iframe/i', '<div class="video-container"><div class="video"><iframe', $the_content);
    $the_content = preg_replace('/<\/iframe>/i', '</iframe></div></div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

これは記事本文表示前に、記事中からiframeタグを見つけて、iframeの外側にラッパーとなるdiv要素を2つ付けています。

これにより、iframe要素が以下のように囲まれて、記事中に表示されます。(※コメントは表示されません)

<!-- iframeが大きすぎに表示されるのを防ぐラッパー -->
<div class="video-container">
  <!-- iframeの大きさを調節するラッパー -->
  <div class="video">
    <!-- iframe -->
    <iframe src="url">
  </div>
</div>

本文内に、iframe要素があった場合は、div.video-containerとdiv.videoの2つのラッパーが付加されています。

スタイルシートの編集

style.cssなどに以下を追記します。

/************************************
** video
************************************/
/*動画の最大幅を指定する*/
.video-container{
  max-width:640px;
}
 
/*動画の大きさを調整*/
.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
 
/*動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

こうすることで、YouTubeの縦横比率にiframeが調節されます。

Instagramのiframeをレスポンシブに

ただ、上記の方法だけでは、Instagramが正常に表示されません。

本来はこう表示されるべきところで、

Instagram本来の表示

このように表示されてしまいます。

Instagramの表示崩れ

photo by okamuradesu

というのも当然で、YouTubeの縦横比になっているからです。

これを修正するには、Instagramの縦横比にスタイルを修正してやる必要があります。

修正をするには、embedresponsively.comのようなWEBツールを使って、レスポンシブ用のコードを取得し、貼り付けても良いのですが、今回はテーマ側で対応できるようにしたいと思います。

Instagramに対応したスタイル

で、Instagramに対応したスタイルは以下のようになります。

これを、style.cssなどに貼り付けます。

/************************************
** Instagram
************************************/
/*Instagramの最大幅を指定する*/
.instagram-container{
  max-width:640px;
}
 
/*Instagramの大きさを調整*/
.instagram {
  position: relative;
  padding-bottom: 120%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
/*Instagramを囲んでいるdivを目一杯に広げる*/
.instagram iframe,
.instagram object,
.instagram embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これを、Instagramのiframeに対応させるには、ちょっと強引ですがjQueryを使用して以下の手順を行います。

  1. Instagramのiframe要素を探す(iframeでsrcにinstagramが含まれているものを探す)
  2. 親要素2つのラッパーを先程設定したスタイルに付け替え

あまりスマートじゃないかもしれませんが、手軽にできるものは、こんな方法しか思いつきませんでした。

///////////////////////////////
//Instagramコンテナのクラス付け替え
///////////////////////////////
jQuery(function(){
  //srcにinstagramが含まれているiframe要素を探す
  jQuery('.video-container .video iframe[src*="instagram"]').each(function(){
    //親コンテナ要素のclassの付け替え
    jQuery(this).parent().removeClass('video').addClass('instagram');
    //親の親コンテナ要素のclassの付け替え
    jQuery(this).parent().parent().removeClass('video-container').addClass('instagram-container');
  });
});

これで、iframeがInstagramの場合は、Instagramの縦横比が適用されます。

上記のjQueryがページ読み込み時に実行されると、以下のようにラッパーが付け変わります。

<!-- iframeが大きすぎに表示されるのを防ぐラッパー -->
<div class="instagram-container">
  <!-- iframeの大きさを調節するラッパー -->
  <div class="instagram">
    <!-- iframe -->
    <iframe src="instagram_url">
  </div>
</div>

動作確認

スマホなどのレスポンシブ動作テスト環境で表示させてみます。

画面の幅を狭くしてみてもこのようにレスポンシブに表示されます。

Instagramのレスポンシブ対応

まとめ

本当は、functions.phpに追加した関数で、YouTube用の正規表現と、Instagram用の正規表現で分けて、サーバー側の処理でラッパーをつけてやれば良いのかもしれません。

ただ、Instagramのiframeを正確に判断する正規表現を書ける自信がなかったので、jQueryを使用したこのような方法にしました。

この方法なら、今後また縦横比の違うiframe埋込サービスが現れたとしても、JavaScriptファイルに4行ほど加えることで手軽に対応できると思います。