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

  • Plugin

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

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

     出典 : Advanced Custom Fields(ACF)

    設定

    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動画など外部データを埋め込む場合と違い、MP4を直接埋め込む場合、動画データが重いので、圧縮する必要があります。Media Encoderなどのソフトで、データを圧縮(10M以下目安)してから埋め込みましょう。

    また、ページ毎の動画の本数を絞って、ページの軽量化をしましょう。

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

    You may also like