ACFのファイルで、MP4の動画をシングルページに埋め込む

以前のBLOGで、プラグインACFを使用して、シングルページにYouTubeを埋め込むことを紹介しました。

今回は、ACFのファイルで、MP4の動画をシングルページに埋め込む方法を紹介します。

設定

ACFの設定画面を開きます。フィールドタイプはファイルです。フィールドラベルに設定画面に表示する名前を入力します。フィールド名にPHPに入力する名前を入力します。戻り値をファイルのURLに設定します。ライブラリをすべてに設定します。

フィールド名にPHPに入力する名前を入力

設置

投稿ページにフィールドが作成されます。ファイルを追加ボタンをクリックし、MP4の動画ファイルを選択し、投稿を保存します。

ファイルを追加ボタンをクリックし、MP4の動画ファイルを選択

コード

シングルページのループ内に、下記コードを入力します。

<?php
	// ACFのフィールド名を取得
	$video_url = get_field('work_mp4');

	// ファイルURLが存在する場合のみ動画を表示
	if ($video_url) {
		echo '<li class="new-work-gallery-image">';
    	echo '<video width="100%" height="auto" autoplay loop muted playsinline controls>';
    	echo '  <source src="' . esc_url($video_url) . '" type="video/mp4">';
		echo '  お使いのブラウザは動画タグをサポートしていません。';
		echo '</video>';
		echo '</li>';
	}
?>

確認

動画が埋め込まれています。オートスタートで動画が再生されます。

オートスタートで動画が再生

以上で今回の説明は終了です。動画の場所が決まっている場合、ファイル選択のみで、動画を埋め込めるので便利ですね。YouTubeとデザインが違うので、サイトのデザインや、用途に合わせて使い分けましょう。