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

YouTube

WordPressテーマなどでレスポンシブ対応のものを使用していたりすると、YouTubeなどiframeを使用した動画表示させたとき、画面が狭い場合はせっかくの動画が以下のように切れてしまうなんてことがあります。

photo by Esther Vargas

こんな感じに。

iframe切れてしまう

今回は、Wordpressでそのようなことがないように、iframeをフレキシブルに大きさを変更させる方法です。

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

WordPressのカスタマイズ

今回は、以下のページに書かれていることなどを参考にしました。

youtube iframeのレスポンシブ対応 – 酒と泪とRubyとRailsと

この記事では、これをWordpress仕様にし、画面の幅が広いデバイスなどで、大きく表示されすぎるのを防ぐ処理を施した方法を紹介します。

functions.phpの編集

まずはfunctions.phpに以下のように追記します。

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

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

iframeに2つのdivラッパーが付加されています。

スタイルシートの編集

あとはスタイルシートの編集です。

表示の確認

以上のようにして表示を確認すると、以下のようにちゃんと画面の幅に合わせて表示されるようになりました。

iframe正しく表示

たとえデバイスの横幅が大きくなりすぎても、スタイルシートで設定した640px以上になることはありません。(最大幅は自由に変更してください)

iframe横幅が大きくなりすぎてもOK

まとめ

これで、レスポンシブサイトでもYouTubeなどを綺麗に表示できるようになりました。

functions.phpと、style.css(もしくは他のCSS)に2回コピペするだけなので、手軽に実装出来るのではないかと思います。

『YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法』へのコメント

  1. 名前:suspiria 投稿日:2015/12/23(水) 00:53:30 ID:10eec47eb

    はじめまして
    こちらの記事を参考に、最近始めたWPの動画レスポンシブ対応に成功しました。貴重な情報をありがとうございます。

    1点お伺いしたいことがあります、
    作成中のサイトで下記コードの動画がスマホでのレスポンシブに対応しません(サイズが変わらない)。これは、iframeタグがコード内に無いので反映されないということでしょうか?他のサイトでは反映できているようなのですが…。ご教授いただければ幸いです。

    Webでのサイト構築そのものが勉強中のため、説明に不十分な所があるかもしれません、ご容赦ください。

    以下は問題のコードになります。

    ※タグ内“0000-000(動画番号)”“000000(ID)”となっています。

    どうぞ宜しくお願いいたします。

  2. 名前:suspiria 投稿日:2015/12/23(水) 01:01:47 ID:10eec47eb

    先ほどの投稿でコードが表記されておりませんでした。
    大変失礼いたしました。内容は下記になります。
    宜しくお願いいたします。

    <h3><script id=”setAffplayer000000-000″ src=”http://affiliate.dtiserv.com/js/setAffplayer.js?affid=000000&siteid=6&video=http://smovie.caribbeancom.com/sample/movies/000000-000/sample_m.mp4&img=http://www.caribbeancom.com/moviepages/000000-000/images/l_t.jpg&w=560&h=360&url=www.caribbeancom.com&id=000000-000&m_flag=1″ type=”text/javascript”></script></h3>

    ※タグ内“0000-000(動画番号)”“000000(ID)”となっています。

  3. わいひら 名前:わいひら 投稿日:2015/12/23(水) 12:21:59 ID:58e70f852

    これは、iframeタグがコード内に無いので反映されないということでしょうか?

    そうです。
    ここに載せられているコードは、Youtubeで利用しているiframe用になっています。
    なので、iframeを判別する以下のような正規表現を2つ利用しています。

    なので、体をさせたいスクリプトコードに対応した正規表現の置換コードを加えれば、対応できると思います。
    ただ、スクリプトコードを利用するのにそのように置換してしまうと、他のコードへの影響が出てしまうかもしれないので、そういった行動を挿入するときは、以下のように直接スクリプトコードを囲んで書き込めばよいかと思います。多分。

  4. 名前:toshi 投稿日:2016/02/13(土) 17:33:26 ID:3dee17424

    はじめまして
    こちらの記事を呼んだおかげで、WP初心者の私でもの動画レスポンシブ対応できました。とても感謝しております。
    その後、もう少し欲が出てきてしまい、もう少しアドバイスをいただきたいと思い
    質問させていただきます。

    この一連のレスポンシブルに対応する内容を条件分岐でフロントページにはレスポンシブル適応させず、その他のページ、もしくは投稿ページにのみ適応させることはできますでしょうか?

    条件分岐のために下記のように変更してみましたがうまく表示が分岐されません。
    .video-container{

    max-width:640px;

    max-width:640px;

    max-width:400px;
    }

    投稿ページでは最大幅を400にし、フロンとページでは640にしたいと思っています。
    ご教示のほどよろしくお願いします。

  5. わいひら 名前:わいひら 投稿日:2016/02/15(月) 12:56:12 ID:64780a16c

    はじめまして。

    条件分岐をするには、CSSだけではできないと思います。
    「functions.phpの編集」項目のコードにページごとの条件分岐を書いて、フロントページでは、div class="front-page-video-container"、投稿・固定ページではdiv class="singular-video-container"みたいなクラスを割り当てて、それぞれにCSSを指定する必要があるのではないかと思います。

  6. 名前:名無しさん 投稿日:2016/02/16(火) 10:30:48 ID:a89aa3696

    お返事ありがとうございます。
    functions.php 内の 「if ( is_singular() )」の直前で is_home関数を用いて
    else 以降に if ( is_singular() )が適用されるようにして
    functions.phpファイルを更新したらホームページが見れなくなり断念、、。
    無知なのにfunctions.phpはいじらないほうがいいのですね。

    せっかくアドバイスいただきましたが、今の私にはちょっと難しそうです。
    ぼちぼち勉強してみます。

  7. わいひら 名前:わいひら 投稿日:2016/02/16(火) 16:20:55 ID:3b55e311d

    functions.phpは、下手にいじるとサイトが表示されなくなるので、最低限functions.phpファイルのバックアップはしておく必要はあるかもしれません。
    PHPの編集に自信がないうちは、やめておいたほうが無難かもしれません。