🎬 Proyecto Reproductor de YouTube: Crea tu Propio Video Player Responsivo con HTML y CSS

¿Alguna vez te has preguntado cómo crear un reproductor de videos similar a YouTube que se vea bien en cualquier dispositivo? Hoy aprenderás a implementar un reproductor embebido y personalizado, con diseño responsivo, variables CSS y una estructura HTML limpia.

🔧 ¿Qué vas a lograr hoy?

Al finalizar este proyecto serás capaz de:

• Insertar un video de YouTube usando <iframe> dentro de un contenedor adaptado a cualquier pantalla.

• Estructurar tu página con etiquetas semánticas como <header>, <main>, <section>, <p>, <h2>.

• Declarar variables CSS para colores y espaciados (--color-principal, --color-fondo).

• Aplicar unidades relativas (%, em, rem) y calc() para diseño flexible.

• Usar media queries con enfoque mobile-first.

• Importar fuentes personalizadas con @font-face.

• Personalizar el reproductor con box-shadow, border-radius y Flexbox para organización del contenido.

  
  

🧠 Antes de empezar…

Piensa: ¿En qué dispositivo ves más videos? ¿Celular o PC? Si la respuesta es “celular”, el enfoque mobile-first es tu mejor aliado. Así el diseño parte de la pantalla más pequeña y crece hacia pantallas más grandes.

Repasemos conceptos que usarás:

• @media → Para ajustar la vista según el ancho de pantalla.

• Variables CSS → Mantienen tu código ordenado y facilitan cambios globales.

• calc() → Permite ajustar tamaños y márgenes dinámicamente.

• @font-face → Carga tipografías únicas que no vienen por defecto.

  
  

💡 Estructura general del proyecto

HTML:

Crea un contenedor principal con <section class="video-container">.

Dentro, inserta un video con <iframe> completando la URL y el título.

Luego, añade un <div class="video-details"> con un <h2> para el título del video y un

<p> para su descripción. Rellena los ... con tu propio contenido.

CSS:

Declara variables CSS en :root para colores, tipografía y espaciado.

En .video-container, define tamaño máximo, márgenes, relleno, color de fondo, bordes redondeados, sombra y usa flexbox (display, flex-direction, justify-content, align-items).

En .video-container iframe, asigna ancho, alto con calc() y bordes redondeados.

En .video-details h2, cambia el color usando var(--color-principal) y ajusta el margen inferior.

En .video-details p, establece el tamaño de fuente.

📱 Responsive con mobile-first:

Define los estilos base para que tu reproductor se vea bien en pantallas pequeñas.

Ajusta .video-container con ancho máximo, márgenes, relleno, disposición (display y flex-direction), espacio entre elementos (gap), color de fondo, bordes redondeados y sombra.

En .video-container iframe establece el ancho, la proporción (aspect-ratio) y los bordes.

Completa los ... con valores que logren un diseño limpio y funcional para móvil, antes de aplicar mejoras con media queries.

🎨 Tipografía personalizada con @font-face:

Diseña primero tu reproductor para móvil definiendo los estilos base en .video-container.

Luego, usa @media para mejorar el diseño en pantallas grandes ajustando tamaños, distribución y espaciado.

Implementa @font-face para cargar una fuente personalizada y configúrala como --fuente-principal.

✅ Buenas prácticas que aplicamos

• HTML semántico para mayor accesibilidad.

• Variables CSS para coherencia visual.

• Diseño adaptable usando unidades relativas y media queries.

• Estética cuidada con sombras, bordes redondeados y tipografía personalizada.

• Separación clara entre estructura (HTML) y estilo (CSS).

  
  

🧪 Taller en clase: Paso a paso

1. HTML Base: Estructura tu reproductor con contenedor y secciones.

2. Estilos CSS: Aplica colores, márgenes, tamaños y tipografía.

3. Responsividad: Ajusta la interfaz con @media para móviles y pantallas grandes.

4. Interacción: Añade efectos :hover o modo noche opcional.

5. Presentación: Muestra tu reproductor y explica el proceso.

   
   

🚀 ¿Y ahora qué sigue?

• Añade animaciones suaves en botones.

• Implementa un modo oscuro.

• Crea listas de reproducción dinámicas con JavaScript.

  
  

✨ Recuerda

Este proyecto no es solo para aprender HTML o CSS, sino para pensar como desarrollador y diseñador: estructurar, adaptar y personalizar la experiencia del usuario.

(Blog creado por Isaac Castillo)