¿Cómo poner un iPod en tu blog?

Otro día más en viernes de tutoriales, por petición popular, voy a explicar cómo hacer este gadget en forma de iPod que suena de verdad:

{Nota del 4 de julio de 2026: quería pedir disculpas porque el código antiguo no le estaba funcionando bien a la gente y estaban teniendo problemas al cargar la imagen o la canción por lo que le he estado echando un vistazo al código y he hallado algunas cositas que a lo mejor estaban fastidiando la carga del gadget. No os preocupéis porque ya lo he cambiado y este código es el nuevo. Agradecería que pongáis en los comentarios si os funciona mejor este código, por favor. Y muchas gracias por todos los avisos que me habéis estado mandando <3}

Como con todos los códigos, te recomiendo copiar el que te pongo y pegarlo en notas para personalizar los colores, las canciones y los tamaños:

<link href="https://fonts.googleapis.com/css2?family=Slackey&amp;display=swap" rel="stylesheet" /

<div class="ipod-widget">

  <div class="iPod">

    <div class="screen">

      <img id="cover" src="" alt="cover" />

      <p id="track-title">Cargando...</p>

    </div>

    <div class="controls">

      <button id="prev" class="ipod-btn">⏮</button>

      <button id="play" class="ipod-btn">

        <span class="play-icon">▶</span>

      </button>

      <button id="next" class="ipod-btn">⏭</button>

    </div>

    <div id="player"></div>

  </div>

</div>

<style>

.ipod-widget {

  all: initial;

  display:block;

}

.ipod-widget .iPod {

  width:00px;

  padding:15px;

  border-radius:20px;

  background:#f5f5f5;

  box-shadow:

  inset -4px -4px 8px #ffffff,

  inset 4px 4px 8px #cccccc;

  text-align:center;

  font-family:Arial;

}

.ipod-widget .screen {

  background:#00000;

  border-radius:12px;

  height:00px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:10px;

}

.ipod-widget .screen img {

  width:00px;

  height:00px;

  object-fit:cover;

  border-radius:10px;

}

.ipod-widget .screen p {

  font-family:'Slackey', cursive;

  font-size:00px;

  color:#00000;

  margin:0;

}

.ipod-widget .controls {

  display:flex;

  justify-content:space-around;

  margin-top:30px;

}

.ipod-widget .ipod-btn {

  border:none;

  background:#ddd;

  border-radius:50%;

  width:00px;

  height:00px;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:0.2s;

}

.ipod-widget .play-icon {

  font-size:35px;

}

.ipod-widget .ipod-btn:active {

 transform:scale(0.9);

}

#player {

 display:none;

}

</style>

<script src="https://www.youtube.com/iframe_api"></script>

<script>

let player;

let current = 0;

const playlist = [

{

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

},

{

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

},

{

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

},

{

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

},

{

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

},

];

function onYouTubeIframeAPIReady(){

player = new YT.Player("player",{

height:"0",

width:"0",

videoId:playlist[0].id,

playerVars:{

autoplay:0,

controls:0

},

events:{

'onReady':function(){

updateUI();

}

}

});

}

function updateUI(){

document.getElementById("track-title").textContent =

playlist[current].title;

document.getElementById("cover").src =

playlist[current].cover;

}

document.addEventListener("DOMContentLoaded",function(){

document.getElementById("play").onclick=function(){

if(!player) return;

let state = player.getPlayerState();

if(state !== 1){

player.playVideo();

}else{

player.pauseVideo();

}

};

document.getElementById("next").onclick=function(){

if(!player) return;

current = (current + 1) % playlist.length;

player.loadVideoById(

playlist[current].id

);

updateUI();

};

document.getElementById("prev").onclick=function(){

if(!player) return;

current = 

(current - 1 + playlist.length) % playlist.length;

player.loadVideoById(

playlist[current].id

);

updateUI();

};

}

);

</script>

Este sería el código customizable, recuerda no dejarte ningún espacio porque son MUY importantes.

Vamos a ir juntas paso a paso para no perder nada de lo que hay que hacer:

El primer "width: 00px;" que encontramos es para el tamaño del gadget. En este código ya no hay una altura fija porque se adapta automáticamente al contenido. Yo lo tengo a 300px, pero puedes ponerlo más pequeño o más grande según lo que necesites.

En la parte del iPod encontramos "background:#00000;", que es el color del cuerpo del iPod. Para ver qué color quieres puedes mirarlo en HTMLcolorcodes.

Siguiendo en la parte de la pantalla encontramos "background:#00000;", que es el color de la pantallita del iPod. Puedes poner el color que más combine con tu blog.

Justo debajo encontramos las medidas "height:00px;", en la que se calcula la altura de la pantalla. Yo recomiendo dejarla sobre los 180px, ya que ocupa un poco más de la mitad del iPod y queda bastante realista.

Siguiendo por la parte de la imagen encontramos estas medidas "width:00px; height:00px;" que calculan el tamaño de la foto que pongamos dentro de la pantalla. Simplemente con que sea más pequeña que la pantalla ya estaría, ahí eliges cómo de grande la quieres. Yo la tengo en 140px por 140px.

Para la parte del texto tenemos estos apartados "font-family:'Slackey', cursive; font-size:00px; color:#00000;" en la que la primera parte es la fuente de la letra (para esta parte tienes que poner el nombre completo de la fuente que quieras), en la segunda parte es el tamaño de la letra, yo lo tengo en 14px, y en la última es el color del texto.

Un poco más abajo encontramos "margin-top:00px;", que es la separación entre la pantalla y los botones.

Si quieres que los botones estén más pegados a la pantalla disminuye el número y si los quieres más separados simplemente auméntalo.

En la parte de los botones tenemos el tamaño "width:00px; height:00px;". Es importante que pongas el mismo tamaño en ambos para que se vean los botones de forma circular y no ovalada. Yo los tengo a 80px.

Justo debajo encontramos "font-size:35px;", que es el tamaño del símbolo de Play. Puedes hacerlo más grande o más pequeño simplemente cambiando ese número.

La última parte y lo que va a permitir poner música es la parte de: 

title:"TÍTULO",

id:"ID_VÍDEO",

cover:"URL_IMÁGEN"

En el título debes escribir el nombre de la canción.

Donde pone ID_VIDEO tienes que poner SOLO una parte del URL del vídeo musical que quieras poner. Por ejemplo, en la canción "Nobody's Son" de Sabrina Carpenter el URL completo es: "https://youtu.be/hE2DLtuxcUU?si=1HHHRBYFGxZQAYxg"

Pero el ID es únicamente:

hE2DLtuxcUU (es decir, lo que entra entre el / y el ?).

En URL_IMÁGEN simplemente pegas el enlace de la imagen que quieras mostrar cuando suene esa canción. Puedes usar una imagen de Pinterest, Tumblr o de donde prefieras, por lo que no hace falta que sea directamente algo relacionado con la canción, aunque sería lo suyo.

Si quieres añadir o quitar canciones deberás añadir o quitar un bloque completo desde el { hasta el }, siguiente, y para cerrar toda la lista debes conservar el ];. Es MUY importante porque si lo borras el reproductor dejará de funcionar.

Una vez editado todo tu código cópialo y ve a la parte de "Diseño" en Blogger, busca el sidebar en el que quieras añadir tu gadget y dale a "Añadir un gadget". Cuando se desplieguen las opciones dale al que pone HTML/JavaScript y pega tu código editado en la parte de contenido. Dale a guardar y, para ver si ha quedado bien, pulsa el icono del ojo que sale en la pantalla de Diseño abajo a la derecha. Una vez hayas encontrado los colores y tamaños que más te gusten para tu iPod, no se te olvide darle al botón de Guardar que está al lado del ojo para que los cambios se publiquen correctamente.

Pues ya estaría el tutorial, espero que te haya servido y no dudes en dejar en los comentarios tus preguntas por si necesitas alguna ayuda. Muchas gracias por leer!! Nos vemoss