Cómo Embeber Video en React

Embeber video en una aplicación React parece sencillo hasta que te topas con un autoplay roto, un iframe que no es responsive, o una etiqueta <embed> que simplemente no funciona. Esta guía cubre los dos enfoques más prácticos: el elemento nativo HTML5 <video> para archivos auto-hospedados, y los embeds con <iframe> para plataformas como YouTube y Vimeo. Las librerías de terceros se mencionan solo cuando aportan un valor real, no como opción por defecto.

Método 1: Video HTML5 en React para Archivos Auto-Hospedados

Si controlas el archivo de video, el elemento nativo <video> es la herramienta adecuada. No necesitas ninguna librería.

import myVideo from './assets/demo.mp4';

export default function VideoPlayer() {
  return (
    <video
      width="100%"
      style={{ aspectRatio: '16/9' }}
      controls
      playsInline
      muted
    >
      <source src={myVideo} type="video/mp4" />
      <track
        kind="subtitles"
        src="/captions/demo.en.vtt"
        srcLang="en"
        label="English"
        default
      />
      Your browser does not support the video tag.
    </video>
  );
}

Algunos puntos a tener en cuenta:

• autoPlay requiere muted para funcionar de forma confiable en los navegadores modernos. Chrome, Safari y Firefox bloquean por defecto el autoplay sin silenciar. No asumas que funcionará sin muted. Ten en cuenta que en JSX el atributo se escribe en camelCase como autoPlay, no autoplay. El soporte de navegadores y las políticas de autoplay están documentados en Can I Use.
• playsInline es necesario en iOS para evitar que el video se abra automáticamente en pantalla completa.
• <track> añade subtítulos o leyendas. Es la forma correcta de manejar la accesibilidad del contenido en video, y es algo fácil de pasar por alto.
• El texto de respaldo dentro de <video> solo aparece en navegadores muy antiguos que no reconocen el elemento. Aun así, vale la pena incluirlo.

Para formatos de streaming adaptativo como HLS (.m3u8), el soporte nativo del navegador varía. Safari maneja HLS de forma nativa, pero Chrome y Firefox requieren una librería como hls.js para analizar y reproducir el stream.

Embed de YouTube en React: Usando un iframe

Para YouTube o Vimeo, un <iframe> es el enfoque estándar. No necesitas un paquete específico de React para esto.

export default function YouTubeEmbed({ videoId }) {
  return (
    <div style={{ aspectRatio: '16/9', width: '100%' }}>
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube-nocookie.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ border: 'none' }}
      />
    </div>
  );
}

Detalles clave:

• Usa youtube-nocookie.com en lugar de youtube.com para la URL del embed. Este es el modo de privacidad mejorada de YouTube, que reduce las cookies de seguimiento hasta que el usuario interactúa con el reproductor.
• title es obligatorio en los iframes para los lectores de pantalla. Sin él, las tecnologías de asistencia no tienen manera de describir el contenido embebido.
• aspectRatio: '16/9' en el contenedor, junto con width: 100% y height: 100% en el iframe, es el enfoque responsive más limpio usando CSS moderno. No se requieren trucos con padding. El soporte del navegador para la propiedad CSS aspect-ratio está disponible en Can I Use.
• El formato de la URL del embed es https://www.youtube-nocookie.com/embed/{VIDEO_ID}. El ID del video es el valor del parámetro de consulta v en una URL estándar de YouTube (por ejemplo, la parte después de ?v= en youtube.com/watch?v=VIDEO_ID).

Puedes pasar parámetros adicionales mediante el query string:

/embed/VIDEO_ID?controls=1&rel=0

Cuándo Usar una Librería de Reproductor de Video en React

Para la mayoría de los casos de uso, el elemento nativo <video> o un iframe simple son suficientes. Considera una librería como ReactPlayer si necesitas dar soporte a múltiples plataformas (YouTube, Vimeo, Wistia, HLS, DASH) desde un único componente con una API unificada, o si necesitas callbacks de eventos como onReady, onProgress u onEnded en distintos proveedores.

ReactPlayer agrega un peso considerable al bundle, por lo que vale la pena evaluar si realmente necesitas esa flexibilidad antes de añadirlo como dependencia.

Conclusión

Empieza con la herramienta más simple que funcione. Para video auto-hospedado, utiliza el elemento HTML5 <video> con controls, playsInline, y muted si necesitas autoplay. Para los embeds de YouTube en React, un simple <iframe> apuntando a youtube-nocookie.com con un atributo title adecuado es todo lo que necesitas. Recurre a una librería solo cuando el enfoque nativo realmente se quede corto.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.