Reproductor tipo Spotify para Youtube

• 1. Desenfocao - Rauw Alejandro
• 2. POR QUE SERA - Grupo Frontera
• 3. Ella Quiere Beber (Remix) - Anuel Aa
• 4. De Nada - Yami Safdie
• 5. MI EX TENIA RAZON - KAROL G
• 6. MIX Corazon - CORAZON SERRANO
• 7. Bajo el Cielo - Ariana Grande X BAD
• 8. FloyyMenor - BYONCE
• 9. Verano Rosa - Karol G & Feid
• 10. DtMF - Bad Bunny
• 11. Noventa - DJ Snake, J Balvin

Código Fuente

<div id="miReproductor"> <div class="player-container"> <div class="video-container"> <div id="player"></div> </div> <!-- Lista de reproducción --> <ul class="playlist" id="playlist"> <li class="playlist-item active" data-video="HBdEkUgX95k"><div>1. <span class='titleyt'>Desenfocao</span> - <span class='artist'>Rauw Alejandro</span></div></li> <li class="playlist-item" data-video="_G4MvUaaaLw"><div>2. <span class='titleyt'>POR QUE SERA</span> - <span class='artist'>Grupo Frontera</span></div></li> <li class="playlist-item" data-video="0w3XwPVxcsw"><div>3. <span class='titleyt'>Ella Quiere Beber (Remix)</span> - <span class='artist'>Anuel Aa</span></div></li> <li class="playlist-item" data-video="ebF6mT2Sn0w"><div>4. <span class='titleyt'>De Nada</span> - <span class='artist'>Yami Safdie</span></div></li> <li class="playlist-item" data-video="VBcs8DZxBGc"><div>5. <span class='titleyt'>MI EX TENIA RAZON</span> - <span class='artist'>KAROL G</span></div></li> <li class="playlist-item" data-video="5KTlHuNTwQA"><div>6. <span class='titleyt'>MIX Corazon</span> - <span class='artist'>CORAZON SERRANO</span></div></li> <li class="playlist-item" data-video="-4npsoA8PNM"><div>7. <span class='titleyt'>Bajo el Cielo</span> - <span class='artist'>Ariana Grande X BAD</span></div></li> <li class="playlist-item" data-video="Eapj_kFXIF0"><div>8. <span class='titleyt'>FloyyMenor</span> - <span class='artist'>BYONCE</span></div></li> <li class="playlist-item" data-video="FUHaycnjzKg"><div>9. <span class='titleyt'>Verano Rosa</span> - <span class='artist'>Karol G & Feid</span></div></li> <li class="playlist-item" data-video="4X4uckVyk9o"><div>10. <span class='titleyt'>DtMF</span> - <span class='artist'>Bad Bunny</span></div></li> <li class="playlist-item" data-video="4a67sLrI3EM"><div>11. <span class='titleyt'>Noventa</span> - <span class='artist'>DJ Snake, J Balvin</span></div></li> </ul> </div> </div> <style> #miReproductor { font-family: Arial, sans-serif; background: #121212; color: #fff; display: flex; justify-content: center; padding: 10px; } #miReproductor .player-container { width: 100%; max-width: 800px; background: #1e1e1e; border-radius: 10px; padding: 15px; box-sizing: border-box; } #miReproductor .video-container { position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 15px; } #miReproductor #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #miReproductor .playlist { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; } #miReproductor .playlist-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; font-size: 14px; } #miReproductor .playlist-item > div { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #miReproductor .playlist-item.active { background: #1db954; color: #000; font-weight: bold; } #miReproductor .playlist-item:hover { background: #333; } #miReproductor .titleyt { font-weight: bold; } #miReproductor .artist { font-style: italic; } #miReproductor .playlist::-webkit-scrollbar { width: 6px; } #miReproductor .playlist::-webkit-scrollbar-thumb { background: #1db954; border-radius: 3px; } @media (max-width: 600px) { #miReproductor .playlist-item { font-size: 13px; flex-direction: column; align-items: flex-start; } } </style> <script> let player; let currentIndex = 0; const playlistItems = document.querySelectorAll('#miReproductor .playlist-item'); function onYouTubeIframeAPIReady() { const firstVideo = playlistItems[0].dataset.video; player = new YT.Player('player', { height: '360', width: '640', videoId: firstVideo, playerVars: { 'autoplay': 0, 'controls': 1 }, events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { if(event.data === YT.PlayerState.ENDED){ nextVideo(); } } function loadVideo(index) { playlistItems.forEach(item => item.classList.remove('active')); playlistItems[index].classList.add('active'); currentIndex = index; const videoId = playlistItems[index].dataset.video; player.loadVideoById(videoId); } function nextVideo() { currentIndex = (currentIndex + 1) % playlistItems.length; loadVideo(currentIndex); } playlistItems.forEach((item, index) => { item.addEventListener('click', () => loadVideo(index)); }); </script> <script src="https://www.youtube.com/iframe_api"></script>

Nos apoyas abriendo una pequeña publicidad 🙏

🎵 Cómo usar y editar el reproductor

Este reproductor es una playlist de videos de YouTube integrada en tu página. Permite reproducir canciones automáticamente, cambiar entre ellas y mostrar una lista interactiva.

---

📌 1. Cambiar videos

Cada canción está dentro de un elemento como este:

<li class="playlist-item" data-video="ID_DEL_VIDEO">
  <div>1. <span class='titleyt'>Titulo</span> - 
  <span class='artist'>Artista</span></div>
</li>
  

Cómo editar:

• ID_DEL_VIDEO: es el código del video de YouTube (ejemplo: HBdEkUgX95k)
• Titulo: nombre de la canción
• Artista: nombre del artista

---

📌 2. Agregar más canciones

Solo copia una línea existente y pégala debajo:

<li class="playlist-item" data-video="NUEVO_ID">
  <div>Nueva canción</div>
</li>
  

---

📌 3. Video inicial

El primer elemento de la lista es el que se reproduce primero. Si quieres cambiarlo, solo mueve el orden de los elementos.

---

📌 4. Estilo (colores)

Puedes cambiar los colores en el CSS:

background: #121212; /* fondo */
color: #fff; /* texto */
background: #1db954; /* elemento activo */
  

---

📌 5. Funciones automáticas

• ✔ Reproduce el siguiente video automáticamente
• ✔ Cambia de video al hacer clic
• ✔ Resalta la canción activa

---

💡 Consejo: Puedes usar este reproductor para música, podcasts o videos de cualquier temática.