【PHP】コピペでOK！YouTubeの動画を新着順に埋め込むコード

とりとん

普通の埋め込みは簡単にできるけど、今回は新着順に並べる方法だよ～

最近はYouTubeに動画投稿している人が増えてきましたよね。

ブログ運営と並行している方もよく見かけます。

今回は、PHPを使ってWebページにYouTubeの動画を新着順に埋め込む方法を紹介したいと思います。

新しく動画を投稿するたびに勝手に更新されるので、サイトに新着動画を並べて設置したいときに便利ですよ！

⬇️今回の完成形はこんな感じ。

◆新着順に3件取得して横並び　※画面幅が500px以下からは縦並び

◆投稿日とタイトルの取得

◆YouTubeに飛べる再生ボタン設置

DEMO

2024.08.27

sample11

再生
2024.08.29

sample10

再生
2024.08.19

sample9

再生

とりとん

早速コードを確認してみよう！

この記事の内容は・・

コード
WordPressでPHPを読み込む方法

コード

PHPの2行目にYouTubeのチャンネルIDが必要なので、確認方法も記載しておきます。

動画のページではなく、

投稿者のところをクリックしてアカウントページ？に行くと、

URLが

『https://www.youtube.com/channel/【24桁の英数字】』

という感じになっていると思います。

この24桁の英数字がチャンネルIDです！

24桁の英数字以下の『?view_as=』などは無視してくださいね。

PHP

<?php
 $feed='https://www.youtube.com/feeds/videos.xml?channel_id=UCNM9Rsq1frPYx1YAMEAyfUQ';
 $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 ){
    echo '<ul class="youtube_list">';
    for ($i=0; $i < 3; $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;
      }
      }
     ?>
     <li class="youtube_list_item">
      <iframe src="https://www.youtube.com/embed/<?php echo htmlspecialchars($video_id, ENT_QUOTES, 'UTF-8') ?>" frameborder="0" allowfullscreen></iframe>
      <p class="date"><?php echo $video_date;?></P> 
      <p class="title"><?php echo $video_title;?></P>  
      <?php                                          
      echo '<div class="button"><a href="https://www.youtube.com/watch?v='.$video_id.'">再生</a></div>'
      ?>
     </li>
     <?php
    }
    echo '</ul>';
   }
 }
?>

CSS

.youtube_list {
  display: flex;
}

@media screen and (max-width: 500px) {
  .youtube_list {
    flex-direction: column;
  }
}

.youtube_list .youtube_list_item {
  flex-direction: column;
  text-align: left;
  color: #5e535a;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 500px) {
  .youtube_list .youtube_list_item {
    padding: 0 0 20px;
  }
}

.youtube_list .youtube_list_item iframe {
  width: 100%;
}

.youtube_list .youtube_list_item:nth-child(n) {
  margin-right: 1vw;
}

.youtube_list .youtube_list_item:nth-child(3n) {
  margin-right: 0;
}

.button {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

.button a {
  display: block;
  position: relative;
  text-align: center;
  color: #fff;
  background: pink;
  letter-spacing: 0.08em;
  padding: 10px 0;
}

.button a::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left: 8px solid #fff;
}