Default

<h3><span style="color: rgb(236, 240, 241);">📺 <span style="color: rgb(0, 0, 0);">PLAIZ EN DIRECTO: 24 HORAS DE CADISMO</span></span></h3>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Galería de Vídeos</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      text-align: center;
      padding: 20px;
    }

    h2 {
      color: #003380;
      margin-top: 60px;
      margin-bottom: 20px;
    }

    .video-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin-bottom: 20px;
    }

    .video-item {
      max-width: 360px;
    }

    .video-item iframe {
      width: 100%;
      height: 202px;
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .video-title {
      margin-top: 10px;
      font-size: 16px;
      color: #222;
    }

    .pagination {
      margin-bottom: 50px;
    }

    .pagination button {
      padding: 8px 14px;
      font-size: 16px;
      margin: 0 6px;
      background-color: #004AAD;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .pagination button.active {
      background-color: #FFA500;
      font-weight: bold;
    }

    .pagination button:hover {
      background-color: #003380;
    }

    @media (max-width: 1100px) {
      .video-grid {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>
</head>
<body>
  
  <h2>Primer Equipo</h2>
  <div id="videoGrid0" class="video-grid"></div>
  <div id="pagination0" class="pagination"></div>

  
  <h2>Challenges</h2>
  <div id="videoGrid1" class="video-grid"></div>
  <div id="pagination1" class="pagination"></div>

  
  <h2>Highlights</h2>
  <div id="videoGrid2" class="video-grid"></div>
  <div id="pagination2" class="pagination"></div>

  
  <h2>Programas</h2>
  <div id="videoGrid3" class="video-grid"></div>
  <div id="pagination3" class="pagination"></div>

  
  <h2>Club</h2>
  <div id="videoGrid4" class="video-grid"></div>
  <div id="pagination4" class="pagination"></div>

  
  <h2>Mirandilla</h2>
  <div id="videoGrid5" class="video-grid"></div>
  <div id="pagination5" class="pagination"></div>

  
  <h2>Femenino</h2>
  <div id="videoGrid6" class="video-grid"></div>
  <div id="pagination6" class="pagination"></div>

  
  <h2>Cantera</h2>
  <div id="videoGrid7" class="video-grid"></div>
  <div id="pagination7" class="pagination"></div>

  
  <h2>Historia</h2>
  <div id="videoGrid8" class="video-grid"></div>
  <div id="pagination8" class="pagination"></div>

<script>
const API_KEY = 'AIzaSyB-vtOJvoBoCaNltNSfOP5b7XVHp8kOioo';
const playlists = [
  'PLTMZoDiB1MqdOkKnTCEF_-OOmxsEsy4U3',  // Primer Equipo
  'PLTMZoDiB1Mqe4GnnBjfXUpNZT-AGfWrVa',  // Challenges (nuevo)
  'PLTMZoDiB1MqeNeFWcT1sT3BbvhyRk5w0s',  // Highlights
  'PLTMZoDiB1MqfFstLioj4jMGFVSiM18G_r',  // Programas
  'PLTMZoDiB1Mqd2P2S2oOcmIgVY1sWI-YQw',  // Club
  'PLTMZoDiB1MqdWFnFELA5edndC8Y9rxwe4',  // Mirandilla
  'PLTMZoDiB1MqfCzh74Ld89K87lIB2_eUgU',  // Femenino
  'PLTMZoDiB1MqdO5QDaUwqmeJgRFU_c2eKp',  // Cantera
  'PLTMZoDiB1Mqdw322tRrgZc6IySbivjvkx'   // Historia
];

playlists.forEach((playlistId, idx) => {
  let allVideos = [];
  let currentPage = 0;
  const VIDEOS_PER_PAGE = 3;

  async function fetchAllVideos(pageToken = '') {
    const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=50&pageToken=${pageToken}&key=${API_KEY}`;
    try {
      const res = await fetch(url);
      const data = await res.json();
      const videos = data.items.map(item => ({
        id: item.snippet.resourceId.videoId,
        title: item.snippet.title
      }));
      allVideos = allVideos.concat(videos);
      if (data.nextPageToken) {
        await fetchAllVideos(data.nextPageToken);
      } else {
        renderVideos();
      }
    } catch (err) {
      console.error('Error al cargar vídeos:', err);
      document.getElementById(`videoGrid${idx}`).innerHTML = '<p>No se pudieron cargar los vídeos.</p>';
    }
  }

  function renderVideos() {
    const grid = document.getElementById(`videoGrid${idx}`);
    const pagination = document.getElementById(`pagination${idx}`);
    grid.innerHTML = '';
    pagination.innerHTML = '';

    const start = currentPage * VIDEOS_PER_PAGE;
    const end = start + VIDEOS_PER_PAGE;
    const current = allVideos.slice(start, end);

    current.forEach(video => {
      const wrapper = document.createElement('div');
      wrapper.className = 'video-item';
      wrapper.innerHTML = `
        <iframe src="https://www.youtube.com/embed/${video.id}" allowfullscreen></iframe>
        <div class="video-title">${video.title}</div>
      `;
      grid.appendChild(wrapper);
    });

    const totalPages = Math.ceil(allVideos.length / VIDEOS_PER_PAGE);
    for (let i = 0; i < totalPages; i++) {
      const btn = document.createElement('button');
      btn.textContent = i + 1;
      if (i === currentPage) btn.classList.add('active');
      btn.onclick = () => {
        currentPage = i;
        renderVideos();
      };
      pagination.appendChild(btn);
    }
  }

  fetchAllVideos();
});
</script>

</body>
</html>

📺 PLAIZ EN DIRECTO: 24 HORAS DE CADISMO