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

PHP
とりとん
とりとん

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

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

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

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

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

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

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

投稿日とタイトルの取得

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

DEMO
とりとん
とりとん

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

コード

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;
}

WordPressでPHPを読み込む方法

WordPressのエディターでそのままPHPを記述することはできませんが、『PHP Everywhere』というプラグインを入れることでページ別にPHPを記述することができます。

今回紹介したコードもコピペで使うことができるので、ぜひ使ってみてください!

PHPの知識がなくてもわかりやすいように使い方の手順をまとめてみたので、よかったら参考にしてくださいね⬇️

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました