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

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

YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法

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

nelog.jp

2014-07-22 12:11

ただ、この方法を使用した場合、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が正常に表示されません。

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

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

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を使用して以下の手順を行います。

Instagramのiframe要素を探す（iframeでsrcにinstagramが含まれているものを探す）
親要素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>