【WordPress】YouTube埋め込み動画のカスタマイズ (16:9比率)

前提
ソースコード全文
埋め込んでみたよ (閲覧用)

前提

私の場合、WordpressへYouTube動画を埋め込む際はYouTubeのURLを記事にそのまま貼り付ける方法を取っている。ただしこの方法は楽ではあるが、動画が記事より小さく表示されてしまいあまり綺麗でない。

そのため下記の要件を実装するソースコードを記載しておく。ちなみに私のテーマはJINだ。

埋め込み動画(iframe)を16:9で記事いっぱいに表示する
動画下部に追記したキャプションのフォントを整える

ソースコード全文

たぶん、Wordpressを使用していて、YouTubeのURLを記事にそのまま貼り付けて埋め込んでいる人は同じクラスだとは思う。が、埋め込みコードを利用している場合などはクラス名が異なる可能性があるためそれぞれ調べる必要がある。

.video{
	position: relative;
	width:100%;
	height:0px;
	padding-bottom: 56.25%;
}
.video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.wp-block-embed-youtube figcaption{
	font-size:0.8em;
	text-align:center;
	color:gray;
}

解説…？

正直これに関しては解説するほどの内容がない。videoクラスに記載しているCSSはもっぱらiframe関連のレスポンシブで使われる定石である。ざっくり解説すればiframeは100%で指定すると縦幅が表示されないので、iframeを内包するブロッククラスで指定するということ。ちなみにvideoはURLそのままの埋め込みで自動的に付くクラスだ。

最後の「.wp-block-embed-youtube figcaption」のCSSはキャプションのフォントを指定しているだけなので、動画にキャプションを付けない場合は削除しても構わない。