WEB

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

投稿日:2019年1月7日 更新日:

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に追記するコード

functions.phpに追記するコード

簡単なコード説明

動作概要

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

補足説明

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

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

さいごに

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





▼関連記事(一部広告)

-WEB

© 2021 ヨコログ