指定したyoutubeチャンネルの新着動画を表示させる方法

記事の中で紹介したチャンネルの動画や、自分の動画なんかをiframeで埋め込む際に、簡単に行える方法を考えてみました。 この方法では、チャンネルのIDと、取得する動画本数だけをショートコード内に入力して、フィードから動画を取得、表示させています。

やろうとした事

プラグインを使えば簡単に出来る事ですが、APIのキーを取得したりと少し面倒に思ったので、youtubeのfeedを利用する事で簡単に指定したチャンネルの新着動画を取得、表示しようと思ったことから作成しました。

実際のコード

PHP

function youtubeList($atts){
  extract(
    shortcode_atts(
      array(
        'channel' => '',
        'limit' => '3'
      )
      , $atts
      )
  );
  $feed='https://www.youtube.com/feeds/videos.xml?channel_id='.$channel;
  $xml = simplexml_load_file($feed);
  $obj = get_object_vars($xml);
  $obj_entry = $obj["entry"];
  if($obj_entry != null){
    $total = count($obj_entry);
    if( $total != 0 ){
      $contents .= '<ul class="movie_list_wrap">';
      for ($i=0; $i < $limit; $i++) {
        foreach ($obj_entry[$i] as $key => $value) {
          if( in_array($key, array('id','title','updated')) ){
            if( $key=='id'){
                $video_id = str_replace('yt:video:', '', $value[0]);
              };
            if( $key=='title' ){
              $video_title = $value[0];
            };
            if( $key=='updated' ){
              $video_date = date('Y.m.d',strtotime($value[0]));
            }
          }else{
            continue;
          }
        }
      $contents .= '<li class="movie_list"><div class="youtube"><div class="youtube-container">';
      $contents .= '<iframe src="https://www.youtube.com/embed/'. htmlspecialchars($video_id, ENT_QUOTES, 'UTF-8').'" frameborder="0" allowfullscreen></iframe>';
      $contents .= '</div></div></li>';
      }
    $contents .= '</ul>';
    }
  }
  $html = $contents;
  return $html;
}
add_shortcode('youtube_list','youtubeList');

CSS

.movie_list_wrap{
  display:flex;
  gap:10px;
  padding:0;
}
.movie_list_wrap li{
  list-style:none;
}

CSSは最低限の記載なので、それぞれ調整してご利用ください。

ショートコードの使い方

記事の中で下記のようにショートコードを挿入する事でそこにyoutubeのiframe動画が表示されます。

[youtube_list limit="3" channel="dummy"]

表示件数は「limit」で指定していてチャンネルIDは「channel」に指定します。
実際の表示がこちらです。

※サンプルで使用させていただいた動画は個人的に応援しているチャンネルであり、当方とは一切関係ありません。