ACFのoEmbedで、レスポンシブ対応のYouTube動画を埋め込み

動画の埋め込みは、ブロックエディターや、ギャラリープラグインなど、色々な方法があります。今回は、ACFのoEmbedで、シングルテンプレートページや、トップページに、レスポンシブ対応のYouTube動画を埋め込む方法を紹介します。

ACF設定、コードは、Web制作時に行うもので、管理者は設定のみ行います。

 出典 : Advanced Custom Fields(ACF)

今回のDEMOは、アクリスフィギュの動画を埋め込んでいます。

ACF YOUTUBE EMBED

MOVIE

幅70%、最大幅1000px、で埋め込んでいます。SPでは最小幅360pxで表示されます。

ACF設定

新しくフィールドグループを作成し、フィールドタイプをoEmbedにします。編集画面に表示するフィールドラベル、PHPに記入するフィールド名を設定します。埋め込みサイズは空欄のままです。

フィールドタイプをoEmbedに。埋め込みサイズは空欄のまま

コード

表示したいページのループ内に下記コードを挿入します。

<div class="embedbox">
	<article class="embed-container">
		<?php the_field('add_embed'); ?>
    </article>
</div>

CSSでレスポンシブ対応の設定をします。

.embedbox{
	width: 70%;
	min-width: 360px;
	max-width: 1000px;
	margin: 0 auto;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
 
.embed-container iframe,
.embed-container object,
.embed-container embed {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}

設置

設定したYouTubeフィールドグループとYouTube埋め込みフィールドが表示されます。URLを入力にYouTubeのURLを入力します。これで完成です。

URLを入力にYouTubeのURLを入力

以上で、今回の説明は終了です。場所を固定して表示したい場合に有効な機能で、シングルページだけでなく、トップページにも使えます。レスポンシブ対応にしているので、更新はYouTubeのURLを入力するだけで簡単に更新できます。

ACFは、多くのWordPressサイトで使用されているプラグインですが、PHPなどのプログラミング知識が必要です。しかし、様々なテンプレートページに柔軟に対応できる機能が揃っています。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。