Get all feeds from a channel and display them in a nice grid with lightbox

supernova-youtube-feeds.php

<?php
/**
 * Plugin Name: Supernova - YouTube Feeds
 * Plugin URI: https://www.4property.com/
 * Description: YouTube Feed
 * Version: 1.0.0
 * Author: 4Property
 * Author URI: https://www.4property.com/
 * License: GNU General Public License v3 or later
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 */


//
function getChannelVideos($channelIds, $apiKey) {
$apiUrl = 'https://www.googleapis.com/youtube/v3/search';
$apiKey = 'YOUR_API_KEY_HERE';
$maxResults = 20;

$videos = array();

  foreach ($channelIds as $channelId) {
    $url = "https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=$channelId&maxResults=10&order=date&key=$apiKey";

    $response = file_get_contents($url);
    $data = json_decode($response);

    foreach ($data->items as $item) {
      if ($item->id->kind === 'youtube#video') {
        $videoId = $item->id->videoId;
        $title = $item->snippet->title;
        $thumbnail = '';

if (isset($item->snippet->thumbnails->maxres)) {
    $thumbnail = $item->snippet->thumbnails->maxres->url;
} elseif (isset($item->snippet->thumbnails->standard)) {
    $thumbnail = $item->snippet->thumbnails->standard->url;
//} elseif (isset($item->snippet->thumbnails->high)) {
//    $thumbnail = $item->snippet->thumbnails->high->url;
} elseif (isset($item->snippet->thumbnails->medium)) {
    $thumbnail = $item->snippet->thumbnails->medium->url;
}

        $videos[] = array(
          'videoId' => $videoId,
          'title' => $title,
          'thumbnail' => $thumbnail
        );
      }
    }
  }

  return $videos;
}


function supernova_feed_youtube() {
$apiUrl = 'https://www.googleapis.com/youtube/v3/search';
$apiKey = 'YOUR_API_KEY_HERE';
$maxResults = 20;

    $channelIds = [
        'UC248v-i4lQ6cIJUqPAkAF5A',
        'UCl1smhnic-yqRNZQZoyoWRw',
    ];

    $out = '<style>
#lightbox-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: auto;
  max-width: 800px;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 9999;
}



  #lightbox-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

#lightbox-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#lightbox-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.supernova-feed--wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.supernova-feed--wrapper > a {
    width: 31.33%;
}
.supernova-feed--wrapper > a img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

    <div id="lightbox-container">
        <div id="lightbox-video"></div>
        <button id="lightbox-close-btn">X</button>
    </div>
    <div class="supernova-feed--wrapper">';

    $videos = getChannelVideos($channelIds, $apiKey);

    foreach ( $videos as $video ) {
    $videoId = $video['videoId'];
    $title = $video['title'];
    $thumbnail = $video['thumbnail'];

    $out .= "<a href='#' class='video-thumbnail' data-video-id='$videoId'>
            <img src='$thumbnail' alt='$title'>
            </a>";
    }

    $out .= '</div>
    <script>
const thumbnails = document.querySelectorAll(".video-thumbnail");

thumbnails.forEach((thumbnail) => {
  thumbnail.addEventListener("click", function(event) {
    event.preventDefault();

    const videoId = this.dataset.videoId;
    const videoUrl = `https://www.youtube.com/embed/${videoId}`;

    const lightboxContainer = document.getElementById("lightbox-container");
    const lightboxVideo = document.getElementById("lightbox-video");

    lightboxVideo.innerHTML = `<iframe width="560" height="315" src="${videoUrl}" frameborder="0" allowfullscreen></iframe>`;
    lightboxContainer.style.display = "flex";
  });
});



const lightboxContainer = document.getElementById("lightbox-container");

lightboxContainer.addEventListener("click", function(event) {
  // Check if the clicked element is the lightbox container or its descendant elements
  if (
    event.target === lightboxContainer ||
    event.target === lightboxCloseBtn ||
    lightboxContainer.contains(event.target)
  ) {
    lightboxContainer.style.display = "none";
    const lightboxVideo = document.getElementById("lightbox-video");
    lightboxVideo.innerHTML = "";
  }
});


const lightboxCloseBtn = document.getElementById("lightbox-close-btn");

lightboxCloseBtn.addEventListener("click", function() {
  lightboxContainer.style.display = "none";
  const lightboxVideo = document.getElementById("lightbox-video");
  lightboxVideo.innerHTML = "";
});
</script>';

    return $out;
}

add_shortcode( 'supernova-feed-youtube', 'supernova_feed_youtube' );