WordPressの新エディタGutenberg(グーテンベルク)でYouTubeをレスポンシブで表示させる方法

2019年にWordPressの新エディタGutenberg(グーテンベルク)がリリースされました。最初は使いづらいかもしれませんが、WordPressのアップデートには常に対応していくほうがセキュリティ的にも良いので、アップデートをおすすめします。

ここから本題です。

今まではYouTubeの動画を投稿に埋め込む時はAddQuickTagなどのプラグインやHTMLモードで直接クラスを書いたりしてレスポンシブ対応を行ってましたが、クライアントにグーテンベルグで納品するので、ビジュアルモードで且つシンプルにYouTube埋め込みできる仕様が必要ということで、今回ご紹介する方法を見つけました。

まだネットの記事にはないので、HTML、CSS難民は結構困ってるんじゃないかと。

グーテンベルグのビジュアルエディタにYouTubeを埋め込む

シンプルな埋め込み

もしレスポンシブ対応が不要であれば埋め込みたいYouTube動画のURLをコピーして、ビジュアルモードのグーテンベルグにそのままペーストすると簡単に埋め込みができます。便利ー!

この時HTMLはpタグの中にiframeが入りYouTubeが埋め込まれてる状態になります。

レスポンシブに対応した埋め込み

上記同様に埋め込みたいYouTube動画のURLをコピーして、ペーストする前に埋め込み方を左寄せか中央か右寄せで決めれるのでいずれかを選択してURLの入力欄にペーストしてください。

こうするとiframeをdivの特定のクラスで囲ってくれます。

これで勘の良い人はわかったかもですが、このdivのクラスに対してレスポンシブ対応のCSSを書けばいいだけです。簡単。

このやり方であれば下記のCSSをコピペしてください。

これで対応完了です。

まとめ

新エディタであるグーテンベルグもまだまだ可能性未知数ですが、クラッシックエディタはいずれ廃止になるかもしれませんので早めにグーテンベルグに慣れてしまいましょう!クラッシックエディタとは違う方法で対応しなければいけないことも多々ありますが、やり方は必ずあるので困ったら自分で考えるネット記事漁るかって感じですね。