WordPressで「特定のURLが含まれたiframe動画」のみをレスポンシブ表示する方法

YouTube

YoutubeやInstagramはiframeを用いてブログなどに動画を埋め込みます。

しかし、ただサービスが発行する埋め込みタグを使用しただけでは、レスポンシブにはならず、画面の幅を狭くしたり、幅の狭い端末で表示させたりすると、動画が枠外にはみ出してしまいます。

こんな感じに。

iframe

それを解消する手段として、以前以下のような記事を書きました。

YouTubeなどで使われるiframe要素を、Wordpressでレスポンシブ対応する方法
iframeをレスポンシブに表示するWordpressのカスタマイズ方法です。
WordPressでYouTubeやInstagramのiframeをレスポンシブ対応にする方法
Instagramのiframe埋め込み要素をレスポンシブデザインに対応させる手順です。

これらの方法は、iframeをレスポンシブ表示用のdivラッパーでくるみ、スタイルを調整することで動画をレスポンシブ表示させていました。

しかし、これらの方法は、iframe全てにレスポンシブ表示用のdivラッパーで囲んでしまうので、関係のないiframeまでレスポンシブ表示させてしまっていました。(例えばアマゾンアソシエイトデフォルトの個別商品リンクなどまでレスポンシブ表示されていた。)

これだと、やはり都合が悪いので、「特定のレスポンシブ表示が必要なサービスにだけ処理を施す」ということがしたいです。

ということで今回の場合だと、YoutubeやInstagramの埋め込みタグの時だけレスポンシブ表示用のdivラッパーで囲むということを行いたいと思います。

photo by jonsson

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

特定サービスの埋め込みiframeだけレスポンシブ化する方法

今回は、Wordpressのfunctions.phpで、PHP&正規表現だけを用いてサーバー処理だけで実装したいと思います。

以前書いたInstagramのiframeをレスポンシブ対応にする方法と違って、JavaScriptでクラスの付け替えなどをする必要がないので、やり方としては幾分スマートになったかと思います。

以下は、コピペのみで行います。このような処理が必要になった場合は、手軽に試してみてください。

functions.phpの編集

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

これは、Wordpressの本文表示をフックして本文中内のiframeに処理を施す関数です。

PHPの正規表現置換関数preg_replace()を用いて、特定のiframe部分のみを置換します。

YouTubeの時は、

Instagramの時は、

という正規表現を用いて、iframeのsrcに含まれるサービスのドメイン名でレスポンシブ表示用のdivラッパーを装着するか判別します。

YouTubeの場合は、「youtube.com」が含まれているとき、Instagramの場合は「instagram.com」が含まれているとラッパーを装着します。それ以外の場合は、iframeにラッパーが装着されないので、通常通り表示されます。

もし、新たなサービスを加えたければ、

と追記していくだけでです。

新たな正規表現を作成する場合は、以下のサービスを使用すると、トライ&エラーを手軽に何度も行うことができて便利です。

style.cssの編集

YouTubeなどのiframe動画をレスポンシブ表示するときの、スタイルは以下のようになります。

このスタイルを貼り付けると、以下のように幅に合わせてiframeが表示されるようになります。

iframeレスポンシブ表示

Instagramでもちゃんとレスポンシブ表示されます。

Instagram-iframe

まとめ

この方法は、コピペを2回行うだけでできるので、結構簡単に実装出来るのではないかと思います。

正規表現は、もっと厳密な書き方も出来るかもしれませんが、とりあえず僕の環境では問題なく動作しています。もしうまくいかなかった場合には、正規表現チェッカーなどで新たな書き方を模索すれば良いかと思います。