Tutorial : diseño de gadget de televisión retro para tu blog ✧˖°

 [ ✦ ] introducción ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

dale un toque nostálgico y estético a tu espacio digital ☁️₊˚⊹ este tutorial te guiará para integrar un marco de televisión vintage cromado que reproduce tus clips o películas favoritas directamente en la pantalla de la tele 

[ ✦ ] requisitos previos ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

• una plataforma de blogs compatible con widgets o bloques html (como blogger o wordpress) 🗂️ • el enlace del vídeo de youtube que deseas reproducir 🎞️

[ ✦ ] paso a paso para la instalación ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

1. dirígete al panel de administración de tu blog y añade un nuevo gadget o bloque de código de tipo html/javascript ⚡

2. copia y pega el siguiente código completo dentro del cuadro:

HTML

<div class="vintage-tv-wrapper">
  <!-- reproductor de vídeo oculto detrás del marco -->
  <div class="vintage-tv-screen">
    <iframe 
      id="tv-player"
      src="https://www.youtube.com/embed/1zpoyNfXpSg" 
      title="reproductor tv retro" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>
    </iframe>
  </div>

  <!-- marco del televisor vintage -->
  <img 
    src="https://i.postimg.cc/qvnskfD9/Vintage-Chrome-Tv-removebg-preview.png" 
    alt="televisor vintage" 
    class="vintage-tv-frame"
  />
</div>

<style>
/* contenedor principal */
.vintage-tv-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 20px auto;
}

/* diseño del marco */
.vintage-tv-frame {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* pantalla ajustada al hueco retro */
.vintage-tv-screen {
  position: absolute;
  top: 31.5%;
  left: 17.5%;
  width: 52%;
  height: 48%;
  z-index: 1;
  background-color: #000;
  border-radius: 20px / 18px;
  overflow: hidden;
}

/* adaptabilidad del vídeo */
.vintage-tv-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

[ ✦ ] cómo cambiar el vídeo ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

• localiza la línea del código que contiene src="[https://www.youtube.com/embed/1zpoyNfXpSg](https://www.youtube.com/embed/1zpoyNfXpSg)" 🔍 • reemplaza 1zpoyNfXpSg por el identificador único del vídeo de youtube que prefieras mostrar 🕯️✨

resultado final: un rincón visualmente único para que tus visitantes disfruten de tus selecciones audiovisuales con estilo clásico 📼🕊️