ビジュアルエディタのみでYoutubeを「レスポンシブ対応&最大値指定&中央配置」で埋め込む方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WordPressで、Youtube動画の埋め込みを下記のように行いたいと思ったのですが、結構苦労しました。

・レスポンシブ対応
・横幅の最大値に上限をつける(1コラムのデザインなので大きくなりすぎないようにしたい)
・横幅が上限値になった場合は、中央に配置
・投稿者がビジュアルエディタしか使えない場合でも使えるようにする(テキストエディタの使用は不可)

検索してよく出てくるのが、divタグでiframeを囲うという方法。ただ、これだとテキストエディタを使用しないといけないので、今回実現したいものにはなりません。

一応、なんとか実装できたので備忘録として方法を書いておきます。

Youtube動画を「レスポンシブ対応&最大値指定&中央配置」で埋め込む方法(概要)

結論から言うと、下記の2つのページで紹介されているコードをマージすればOK。

Youtube (iframe) をレスポンシブ対応に
WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

具体的には、下記2つの作業をすればOK。
1)functions.phpに、投稿内で<iframe></iframe>を見つけたらそこをdivで囲うようにするコードを追記。
2)style.cssに追記。

style.cssに追記するコード

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.yt_wrapper {
  max-width: 640px;
  min-width: 280px;
  margin: 20px auto;
}

functions.phpに追記するコード

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="yt_wrapper"><div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

簡単なコード説明

動作概要

ビジュアルエディタで「https://www.youtube.com/watch?v=w-QbR1gWEP8」のようにYoutube動画のURLを入れると、wordpress側で勝手に<iframe></iframe>の埋め込み形式に変換。今回追記したfunctions.phpのコードによりiframeがdivで囲われた形に置き換えて出力。divにつけたクラスでレスポンシブ対応。

補足説明

.yt_wrapperの「max-width」や「min-width」あたりをいじってやれば、Youtube埋め込みの最大幅も決めれるのでは無いかなと思う。

iframeタグを置き換えているので、youtube以外にiframeが絡むタグを投稿内に書くような事があれば、それも影響を受けると思う。

さいごに

functions.phpで指定のタグを置き換えるというのはアイデア次第で他用途にも使えそう。使う場面あれば使ってみたいですね。


SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください