WordPress記事にYouTubeのURLをコピペで埋め込み、ブロックエディタでも自動でレスポンシブ対応させる

最近のWordPressに採用されているブロックエディタ、個人的にはすごく使いやすくお気に入りです。

YouTubeのURLをコピペで貼り付けると、この記事のように、自動でEmbedを処理して表示してくれます。超楽です。

WordPressのブログカード（Embed）サムネイルサイズの固定などデザインを整えてみる。

ですが、旧エディタ同様に、Youtubeの埋め込みがレスポンシブ化されてくれないんす。

これをレスポンシブ化させる手法も、大きく分けて２種がネットに存在します。

旧エディタ時代と同じく、埋め込んだタグをさらに別のタグで囲む手動型
同じコンセプトでコピペだけで行ける！がうまく動かない残念型（笑）

コピペだけで楽々、ちゃんと埋め込みたいよ（悲）ニーズにフィットするものがなかったので、オリジナルで作りました。記事に残しておきます。

URLをペーストすると、このように埋め込まれます。（キャプションもちゃんと表示されるよ♪）

最近方向性がぶれた感がありますが、私の好きなチャンネルです（笑）

Contents

1 まず最初に構造を理解する
2 誤った記事のケース
3 結果、こんなCSSを追加になります
4 最後に

まず最初に構造を理解する

えらそうに書いていますが（笑）要は埋め込むと、こんな感じにタグが書き出されます。

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
        <iframe loading="lazy" title="動画タイトル" width="750" height="422" src="YotubeのURL?feature=oembed" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <figcaption>キャプション</figcaption>
</figure>

[ iframe ]タグに親タグ、[ wp-block-embed__wrapper ]が書き出されていますので、これを旧エディタの手動時代に追加していたタグと同じ扱いにするだけです。

誤った記事のケース

多いのが、[ wp-block-embed__wrapper ]のさらにその親、[ wp-block-embed ]を対象にスタイルをあてているんですよね。

この場合、子要素に[ figcaption ]のキャプションタグも書き出されてしまうので、このキャプションが動画の下に重なってうまく表示されなくなっちゃいます。（キャプションを使わなければ問題ないんですけどね＾＾）

結果、こんなCSSを追加になります

.wp-block-embed-youtube .wp-block-embed__wrapper{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed-youtube .wp-block-embed__wrapper object,
.wp-block-embed-youtube .wp-block-embed__wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-block-embed-youtube figcaption {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 0.8rem;
	line-height: 1.2rem;
}

figcaptionがキャプションのスタイルになりますので、お好みの余白や文字サイズにてご利用ください。