【WordPressテーマファイル用】キーワード検索でのYoutube Data API V3、YouTube Player API の使い方

content-worldheritage.php

<?php
/********************************************

WordPressテーマファイル用

キーワード指定からの、YouTube動画取得と再生

※APIキーの設定が必要です。

出力したいテーマでコードを埋め込んでください。

画面から検索キーワードを受け取るために、
カスタムフィールド youtube　が必要です

**********************************************/

?>

<?php
// YouTube Data API V3
// YouTubeへリクエストするために必要なURLです。
$baseurl = "https://www.googleapis.com/youtube/v3/search?part=snippet";

// 検索したいキーワード  カスタムフィールドより
$en_name = get_field('youtube');

// 検索クエリ　テキストをエンコードする
$prm_q = urlencode($en_name);

// API KEY
$prm_key = "ここにAPIキーを入力してください。";

$prm_max = 5;        // 最大件数

// order パラメータには、API レスポンス内のリソースの並べ替え方法を指定します。デフォルト値は SEARCH_SORT_RELEVANCE です。
// $prm_order = "relevance ";

// type パラメータは、検索クエリの対象を特定のタイプのリソースのみに制限します。
$prm_type = "video";

// リスエストするためのURLを組み立てます。
$url = "$baseurl&q=$prm_q&key=$prm_key&maxResults=$prm_max&type=$prm_type";

// リクエストして、jsonを取得。
// $json = file_get_contents($url);
//
// JSONをPHPオブジェクトに格納
// $youtube = json_decode($json);

// wp_remote_get で取得する。
$response = wp_remote_get( $url );

// bodyのjsonをデコード
$youtube = json_decode($response["body"]);

// １件目のyoutubeのIDを取得
$video_id = $youtube->items[0]->id->videoId;

// YouTube Data API V3 ここまで

?>

  <div id="YouTube">
    <div id="YouTube-Player"></div>

    <script>
      // YouTube Player API
      // 参考：iframe 組み込みの YouTube Player API リファレンス
      // https://developers.google.com/youtube/iframe_api_reference
      
      var tag = document.createElement('script');
　　　
　　　// iframe API
　　　tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // id="YouTube-Player" へ プレイヤーを表示
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('YouTube-Player', {
          height: '390',
          width: '640',
          videoId: '<?php echo $video_id ; ?>'
        });
      }

      // YouTube Player API ここまで
    </script>

  </div><!-- ./ #YouTube -->