Wordpress

【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はキャプションのフォントを指定しているだけなので、動画にキャプションを付けない場合は削除しても構わない。

埋め込んでみたよ (閲覧用)

自分のYouTubeにアップしている動画を下に埋め込んでみたので「こんなふうになるよ」的な閲覧用としてどうぞ。

ここはキャプションだよ

ABOUT ME
ゼノン / Xenonhyx (管理人)
ゼノン / Xenonhyx (管理人)
愛知県出身。趣味は自作PCとゲーム。 略歴:エンジニア兼マーケター→フリーライター→エンジニア

COMMENT

メールアドレスが公開されることはありません。