tinyvid.dev
Guía · incrustación

Código embed de vídeo HTML

Poner un vídeo en una página es más que una sola línea de HTML. Esta guía repasa los tres patrones de incrustación que de verdad necesitas —un reproductor estándar, un bucle de fondo con reproducción automática y un clip con carga diferida— con código para copiar y pegar de cada uno. O suelta un archivo en TinyVid y él escribe los tres por ti.

01Lo básico

El elemento de vídeo de HTML

El elemento de vídeo nativo es todo lo que necesitas para incrustar vídeo en HTML: sin biblioteca, sin iframe, sin reproductor de terceros. En su forma más simple envuelve una o más líneas source, cada una apuntando a un archivo e indicando su tipo, y el navegador reproduce la primera que pueda admitir.

Da al vídeo un width y un height explícitos, o una relación de aspecto por CSS, para que el navegador reserve el espacio correcto y la página no dé saltos mientras carga. Añade una imagen poster para el fotograma que se muestra antes de la reproducción, y el atributo controls para un reproductor estándar. Todo lo demás —autoplay, bucle, carga diferida— es una variación de esos pocos atributos.

02Patrones

Tres formas de incrustar un vídeo

Casi toda incrustación de vídeo en la web es uno de estos tres patrones, y TinyVid los trae los tres como preajustes. Cada uno llega con los códecs adecuados, una fuente de reserva y las dimensiones reales de tu vídeo; a partir de ahí activas reproducción automática, bucle, controles o miniatura hasta que el código encaje en tu página.

Reproductor estándar

Un reproductor con controles visibles, un poster y descarga progresiva. Es la opción por defecto para cualquier vídeo que un visitante elija ver: un tutorial, una demo de producto, una charla. Lista primero el archivo moderno pequeño y el MP4 H.264 al final para que cada navegador escoja una fuente que pueda reproducir, y fija preload en metadata para que el clip solo cargue cuando alguien pulse reproducir.

<video poster="poster.jpg" width="1280" height="720" controls preload="metadata" style="max-width:100%;height:auto">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Fondo hero

Un clip silencioso y en bucle que se reproduce solo detrás de una cabecera o una sección. Como los navegadores solo permiten la reproducción automática cuando el vídeo está silenciado, este patrón combina los atributos muted, autoplay, loop y playsinline y usa object-fit para cubrir el área. Mantenlo corto y muy comprimido —se descarga para cada visitante—, así que un preajuste Fondo hero sin audio es la fuente adecuada.

<video poster="poster.jpg" autoplay loop muted playsinline style="width:100%;height:100%;object-fit:cover">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lazy-load

Un clip que solo se descarga cuando entra en la vista, manteniéndolo fuera de la ruta crítica. Su dirección se guarda en un atributo data y un pequeño script con IntersectionObserver la intercambia cuando el elemento se acerca a la ventana. Es el patrón más amable para páginas con varios vídeos, donde cargarlos todos de entrada arruinaría el rendimiento.

<video class="lazy-video" poster="poster.jpg" width="1280" height="720" data-src="video.mp4" loop muted playsinline preload="none" style="max-width:100%;height:auto"></video>
<!-- IntersectionObserver swaps data-src → src on view -->
03Pruébalo

Genera tu código embed

Suelta un vídeo abajo. TinyVid lo convierte a formatos listos para la web y te abre el generador: elige un preajuste, activa las opciones que necesites y copia un código que ya lleva el ancho y el alto reales de tu vídeo, de modo que la página reserve su sitio y nada salte al cargar. Gratis hasta 200 MB, sin cuenta.

tinyvid · converter

Suelta tu vídeo aquí

o selecciona un archivo
MP4 · MOV · AVI · MKV · WebM · GIF|Gratis hasta 200 MB
04Buenas prácticas

Atributos y buenas prácticas

Un puñado de atributos hace casi todo el trabajo. El poster da al reproductor un primer fotograma; preload en metadata —o none para los clips diferidos— impide que el navegador descargue el vídeo antes de que haga falta; un width y un height, o una relación de aspecto, evitan el salto de diseño. Para que funcione la reproducción automática el vídeo debe estar silenciado, y playsinline impide que iOS lo fuerce a pantalla completa.

Ofrece más de una fuente. Un archivo WebM o AV1 primero y un MP4 H.264 al final permite que los navegadores modernos tomen el archivo pequeño mientras los antiguos recurren con elegancia a la reserva: el navegador escoge el primer tipo que pueda descodificar. Nombrar los códecs en el type de cada source le ayuda a elegir sin descargar nada.

No olvides la accesibilidad. Añade un elemento track con subtítulos para el contenido hablado, y nunca confíes solo en la reproducción automática para transmitir un mensaje. Un bucle de fondo silenciado debe ser únicamente decorativo: cualquier cosa que un visitante necesite oír pertenece a un reproductor estándar que pueda controlar.

Atributos de la etiqueta video de un vistazo

Todos los atributos que probablemente necesites en un elemento video, y cuándo merecen su sitio.

AtributoQué hace
controlsMuestra los controles del navegador: reproducir, pausa, volumen y línea de tiempo. Inclúyelo en cualquier vídeo que el visitante deba manejar; omítelo solo en bucles de fondo decorativos.
posterImagen que se muestra antes de que empiece la reproducción. Sin ella el reproductor queda en blanco o toma a ciegas el primer fotograma, así que el póster es lo que evita que el hueco parezca roto mientras el vídeo carga.
preloadCuánto descarga el navegador de entrada: metadata lee solo dimensiones y duración, none lo aplaza todo hasta la reproducción, auto deja que el navegador baje el archivo. Usa metadata en la mayoría de reproductores y none por debajo del pliegue.
autoplayInicia la reproducción sin un clic. Los navegadores solo lo respetan en vídeo silenciado, así que va de la mano de muted, y corresponde a clips decorativos, no a contenido que alguien deba elegir ver.
mutedSilencia el audio en la reproducción. Imprescindible para que la reproducción automática funcione. Si un clip nunca debe tener sonido, quita la pista de audio del propio archivo en lugar de confiar en el atributo.
loopReinicia el clip al terminar. Natural en bucles de fondo cortos, molesto en cualquier cosa con narración.
playsinlineMantiene el vídeo dentro de la página en iOS en lugar de lanzarlo al reproductor nativo a pantalla completa. Imprescindible para los bucles de fondo en iPhone.
width / heightReservan el espacio del reproductor antes de que llegue el archivo, para que la página no dé saltos al cargar: la diferencia entre un diseño limpio y una penalización por Cumulative Layout Shift. Un aspect-ratio en CSS hace lo mismo de forma adaptable.
<source>Permite ofrecer varios archivos: el navegador elige el primer type que sabe decodificar. Pon primero el archivo moderno y pequeño (WebM o AV1) y deja un MP4 H.264 al final como recurso universal.
<track>Añade subtítulos como archivo WebVTT. Ponlo en todo lo que tenga voz: es el mínimo de accesibilidad y además hace que el contenido sea buscable.

Una incrustación es tan rápida como el archivo que hay detrás. Reduce primero el tuyo con la guía para comprimir vídeo para la web.

05FAQ
01¿Cómo incrusto un vídeo en HTML?
Usa el elemento de vídeo nativo con una o más líneas source y una imagen poster; el navegador reproduce la primera fuente que admita. No necesitas una biblioteca ni un iframe. TinyVid escribe la etiqueta entera por ti a partir de tu archivo convertido.
02¿Cómo hago que un vídeo se reproduzca solo como fondo?
Los navegadores solo permiten la reproducción automática cuando el vídeo no tiene sonido, así que siléncialo y añade los atributos autoplay, loop y playsinline. El preajuste Fondo hero de TinyVid produce un clip silencioso y muy comprimido hecho justo para esto, y genera el marcado correspondiente.
03¿Por qué no se reproduce solo mi vídeo?
El motivo habitual es que no está silenciado: los navegadores bloquean la reproducción automática de cualquier cosa con audio. En los iPhone, la falta del atributo playsinline también impide la reproducción integrada. Un bucle de fondo silenciado con playsinline se reproduce solo en todos los navegadores.
04¿Cómo hago la carga diferida de un vídeo?
Deja el archivo fuera de la descarga inicial guardando su dirección en un atributo data y fijando preload en none, y luego intercámbialo con un pequeño script de IntersectionObserver cuando el elemento se acerque a la ventana. El fragmento lazy-load de TinyVid incluye el patrón.
05¿Qué formato de vídeo debería incrustar?
MP4 con H.264 para la máxima compatibilidad, opcionalmente con una fuente WebM o AV1 más pequeña listada primero. El navegador descarga el primer tipo que pueda reproducir, así que un archivo moderno con una reserva MP4 llega a todo el mundo.
06¿Necesito un servicio de hosting de vídeo para incrustar un vídeo?
No: puedes autoalojar el archivo convertido y pegar la etiqueta directamente en tu página. Si prefieres no gestionar el almacenamiento y el ancho de banda, el plan Hosted de TinyVid guarda el vídeo en una CDN y te da una URL de inserción lista por un precio mensual fijo.
07¿Cómo inserto un MP4 en HTML?
Pon el archivo en un elemento video y apunta un source hacia él con type="video/mp4": eso es todo lo que necesita un MP4, y se reproduce en cualquier navegador. Añade encima un segundo source —un archivo WebM o AV1— y los navegadores modernos tomarán el archivo más pequeño mientras el MP4 queda como recurso de reserva.
08¿Uso la etiqueta video o un iframe?
Usa el elemento video cuando alojas el archivo tú mismo: mantienes el control del reproductor, del póster, del tamaño y de la carga, y no se carga nada de terceros. El iframe es lo que te dan plataformas como YouTube o Vimeo: más rápido de pegar, pero arrastra su reproductor y sus scripts, y el clip vive según sus reglas. Para un bucle de fondo o un clip corto de producto, autoalojar un archivo comprimido es más ligero y más rápido.
09¿Cómo hago que un vídeo insertado sea adaptable?
Dale al vídeo un width del 100% y un height automático, y define en CSS un aspect-ratio que coincida con el clip para que el navegador reserve el espacio correcto en cualquier ancho de pantalla. Mantén además los atributos width y height en la etiqueta: indican las proporciones al navegador antes de que lleguen el CSS o el archivo, que es lo que evita el salto de diseño.