Saltar a la demo
Cinematic 3DReproductor de YouTube

Reproductor de YouTube · HTML, CSS y JavaScript

Tus videos de YouTube, presentados como un estreno de cine.

Un carrusel 3D de portadas que se abre en un reproductor ampliado, con controles propios, lista con búsqueda y diseño adaptable a cualquier pantalla. Funciona con el reproductor oficial de YouTube y se publica como archivos estáticos.

Probar reproductor Ver características
  • Carrusel 3D
  • API oficial de YouTube
  • Sin dependencias
  • Escritorio y móvil
Captura del reproductor abierto mostrando Big Buck Bunny, con el título, los créditos, el dock de controles y la columna de acciones

Demo en vivo

Pruébalo aquí mismo

  • Pulsa una portada lateral, arrastra o usa ← →
  • Pulsa la portada central para abrir el video
  • Cierra con «Cerrar», Esc o un clic fuera del panel

Videos de ejemplo: películas abiertas de Blender Foundation y Blender Studio publicadas en YouTube. Al abrir un video se carga el reproductor oficial de YouTube, con su marca, sus controles y sus condiciones.

Características

Todo lo que hace, tal como lo ves en la demo

Cada imagen es una captura real del mismo reproductor que acabas de probar.

Carrusel 3D con Big Buck Bunny en el centro y portadas laterales en perspectiva

Carrusel en profundidad

La portada activa queda al frente y las demás se inclinan a los lados en perspectiva. El fondo toma el color de la portada seleccionada y las películas panorámicas se recortan sin franjas negras.

  • Clic o toque en una portada lateral para traerla al centro.
  • Arrastre con el ratón, deslizamiento en pantallas táctiles o desplazamiento horizontal del trackpad.
  • Teclado: ← →, Inicio y Fin; Intro abre el video central.
Panel del reproductor abierto con el video de YouTube, título, créditos, descripción y enlace a YouTube

El video se abre desde la portada

Al pulsar la portada central, el panel crece desde ella con una transición en 3D y carga el reproductor oficial de YouTube, que intenta empezar solo. Si el navegador lo bloquea, basta con pulsar el botón de YouTube.

  • Título, créditos, descripción, datos breves y enlace para abrir en YouTube.
  • Se cierra con «Cerrar», Esc o un clic en el fondo, y vuelve a la misma portada.
  • Al cerrar, el video se detiene: no queda sonando oculto.
Dock de controles con anterior, pausa, siguiente, video activo con tiempo, barra de progreso, lista, aleatorio y control de volumen desplegado

Controles siempre a mano

Un dock compacto bajo el carrusel y el reproductor muestra el video activo con su miniatura y un ecualizador que se anima mientras suena.

  • Anterior, reproducir/pausar y siguiente, también con el panel abierto.
  • Barra de progreso para saltar a cualquier punto, activa en cuanto el video carga, con tiempo actual y duración.
  • Volumen deslizante y silencio, más un botón de video al azar.
Panel de lista de videos con la búsqueda «Colin» mostrando Sintel y Agent 327

Lista con búsqueda

El panel de lista muestra todos los videos con su miniatura y te deja filtrar al instante.

  • Busca por título, descripción, datos breves o créditos, con o sin tildes.
  • Intro selecciona el primer resultado; un clic lleva cualquier video al centro.
  • El video activo queda resaltado en la lista.

Favoritos

Marca videos con el corazón. Se guardan solo en el navegador del visitante y aparecen señalados en el carrusel.

Repetir

Con «Repetir» activo, el video vuelve a empezar al terminar.

Compartir

Abre el menú de compartir del dispositivo o, si no existe, copia el enlace de YouTube del video.

Columna de acciones

Favorito, lista, repetir y compartir a la derecha del carrusel; se puede ocultar si no la necesitas.

Vista móvil del carrusel con las acciones en una fila superior y el dock compacto
Vista móvil con el video de Big Buck Bunny abierto a todo el ancho

Pensado también para el móvil

El reproductor se adapta al ancho real del espacio donde lo colocas, no solo a la pantalla.

  • Las portadas laterales asoman a los lados y se cambian deslizando.
  • La columna de acciones pasa a una fila superior y el dock se compacta.
  • El video ocupa todo el ancho y se reproduce dentro de la página.
El mismo reproductor con acento azul e imagen de fondo de Cosmos Laundromat

Apariencia a tu medida

La captura muestra el mismo reproductor con otro color de acento y una imagen de fondo.

  • Colores de fondo, texto y acento, e imagen de fondo con contraste ajustable.
  • Por video: título, descripción, portada propia, datos breves, créditos y etiqueta.
  • Columna de acciones opcional. Todo se configura en el propio archivo HTML.

Accesible

Navegación completa con teclado, foco visible, etiquetas para lectores de pantalla y respeto de la preferencia «reducir movimiento».

Ligero y estático

HTML, CSS y JavaScript sin librerías ni claves de API. La tipografía va incluida; no hay servidor ni base de datos.

Privacidad por defecto

El reproductor de YouTube solo se carga al abrir un video. Las miniaturas se muestran desde los servidores de imágenes de YouTube.

Comprar

Llévalo a tu web

El mismo reproductor, en dos versiones. Elige la que encaja con tu sitio.

HTML · CSS · JavaScript

YT Cinematic Player Web

Archivos estáticos para cualquier hosting con HTTPS. Configuras videos, colores y fondo en el propio index.html; sin WordPress ni base de datos.

US$30

Comprar versión JavaScript

Plugin para WordPress

YT Cinematic Playlist

Crea y edita listas desde el panel de WordPress, con portadas de la Biblioteca de Medios, e insértalas en cualquier página con un shortcode.

US$50

Comprar versión WordPress

Visitar nuestra tienda

¿Otra función?

Vuelve al carrusel, elige una portada y dale al play.

Probar de nuevo Ver opciones de compra