Vídeo e iframe en HTML: autoplay, subtítulos, embeds responsive | We.Inc
Cómo usar la etiqueta video (autoplay, muted, playsinline, poster), añadir subtítulos con track, crear un vídeo de fondo para el hero e insertar YouTube o Vimeo de forma responsive y con carga diferida, además de un generador de código de inserción.
Para tus propios archivos usa el elemento video: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. El autoplay solo funciona junto con muted. Para YouTube o Vimeo usa un iframe con loading="lazy", un title y aspect-ratio: 16 / 9 para que el tamaño sea responsive. El generador de abajo te escribe cualquiera de los dos.
Los atributos de vídeo que vas a necesitar
Atributo
Efecto
Muestra los controles de reproducción, volumen y pantalla completa del navegador
autoplay muted
Empieza a reproducirse al cargar; la mayoría de los navegadores exigen muted para ello
Se reproduce dentro de la página en el iPhone en lugar de a pantalla completa
Vuelve a empezar al terminar
Imagen que se muestra antes de que empiece la reproducción
none, metadata o auto: cuánto descargar por adelantado
Elige una fuente en el generador, activa o desactiva las opciones y copia un código que ya incluye los atributos que la gente olvida: playsinline para los iPhone, un title en el iframe para los lectores de pantalla, YouTube en modo de privacidad mejorada y una caja 16:9 que nunca se aplasta. Las secciones de abajo tratan los subtítulos, los vídeos de fondo, el sandbox y una fachada de clic para cargar que mantiene los reproductores pesados fuera del primer pintado.
Elige YouTube, Vimeo, un archivo alojado por ti o cualquier otra URL de iframe.
Pega el ID del vídeo o la ruta del archivo y elige autoplay, bucle, controles y momento de inicio.
Deja activadas las opciones responsive y de carga diferida salvo que tengas un motivo para no hacerlo.
Copia el código y pégalo en tu página o en el bloque HTML de tu creador de sitios.
Pon a cada iframe un atributo title que diga qué contiene. Los lectores de pantalla lo anuncian cuando el usuario llega al marco.
Pon preload="none" en los vídeos que están muy abajo en la página, o preload="metadata" si quieres que se muestre la duración sin descargar el clip.
Vuelve a codificar los vídeos de fondo sin pista de audio. Un flujo sin sonido pesa menos y hace que el requisito de muted deje de importar.
Un iframe con loading="lazy" que ya está en la primera pantalla se carga igualmente de inmediato, así que el atributo es seguro en casi cualquier marco.
Ofrece siempre controles o un botón de pausa visible para cualquier movimiento que dure más de cinco segundos, como pide WCAG 2.2.2.
Preguntas frecuentes
¿Por qué mi vídeo no se reproduce automáticamente?
Los navegadores bloquean el autoplay con sonido. Añade muted junto a autoplay, y playsinline para los iPhone. Los modos de ahorro de datos y algunos ajustes del usuario pueden seguir bloqueándolo, así que diseña la página para que funcione solo con la imagen poster.
¿Cómo hago que un vídeo de YouTube insertado sea responsive?
Quita los estilos de ancho y alto fijos y dale al iframe width: 100%; height: auto; aspect-ratio: 16 / 9. La propiedad aspect-ratio mantiene la altura acompasada con el ancho en cualquier tamaño de pantalla y sustituye al antiguo contenedor con padding-bottom: 56.25%.
¿Qué hace youtube-nocookie.com?
Es el modo de privacidad mejorada de YouTube. Según YouTube, la información de visualización no se usa para personalizar la navegación del espectador hasta que reproduce el vídeo. Por lo demás, el vídeo insertado funciona igual; solo cambia el dominio en el src.
¿Qué hace el atributo sandbox en un iframe?
Un atributo sandbox vacío aplica todas las restricciones: sin scripts, sin formularios, sin ventanas emergentes, sin navegación de la página superior y con un origen único. Después vuelves a permitir solo lo que el marco necesita con tokens como allow-scripts o allow-forms. Evita combinar allow-scripts con allow-same-origin para contenido que no es de confianza.
¿Cómo añado subtítulos a un vídeo?
Escribe un archivo WebVTT con fragmentos temporizados y añade <track kind="captions" src="captions.vtt" srclang="en" label="English" default> dentro del elemento video. El navegador añade un menú de subtítulos a sus controles. El archivo debe servirse desde el mismo origen o con CORS.
Por qué una fachada es mejor que insertar el reproductor tal cual
Un iframe de YouTube o Vimeo carga sus propios scripts, estilos y fuentes en cuanto se muestra, antes de que nadie pulse reproducir. En una página con varios vídeos insertados, ese peso recae sobre cada visitante, y la mayoría nunca los ve.
Una fachada muestra la miniatura y un botón de reproducir, y solo cambia al iframe real al hacer clic. Lighthouse incluye este patrón en su auditoría de fachadas de terceros. El código de abajo lo hace en unas pocas líneas y sin ninguna librería.
Vídeo de fondo en el hero, bien hecho
Haz el clip corto, sin sonido y comprimido, pon un poster para que algo se vea al instante y coloca el texto sobre una capa oscura para que el contraste no dependa del fotograma. Oculta el vídeo a quienes piden movimiento reducido y deja que el poster sostenga el diseño.
El elemento video
Un clip de producto con varias fuentes y un poster
El navegador reproduce la primera fuente que admite, así que pon primero el formato más ligero y moderno. El párrafo de dentro solo aparece en navegadores sin ningún soporte de vídeo.
Subtítulos con track y WebVTT
Añadir archivos de subtítulos
kind="captions" incluye efectos de sonido y nombres de quien habla; kind="subtitles" es para traducciones. default activa el primero.
El archivo empieza con WEBVTT, seguido de fragmentos con su hora de inicio y fin y después el texto. Sírvelo con el tipo de contenido text/vtt.
Vídeo de fondo en el hero con alternativa
Hero en bucle y sin sonido con alternativa para movimiento reducido
El poster y el fondo del hero comparten una misma imagen, así que el hero se ve bien antes de que cargue el vídeo y cuando se oculta por movimiento reducido.
Los atributos de iframe que importan
Atributos de iframe y cuándo usarlos
Atributo
Ejemplo
Para qué sirve
title="Store location map"
Nombre accesible del marco
loading="lazy"
Retrasa los marcos fuera de pantalla hasta que el usuario se acerca a ellos al hacer scroll
sandbox="allow-scripts allow-forms"
Limita lo que puede hacer la página enmarcada
allow="autoplay; fullscreen; picture-in-picture"
Concede funciones del navegador al marco
Permite que el reproductor pase a pantalla completa (equivalente antiguo de allow="fullscreen")
referrerpolicy="strict-origin-when-cross-origin"
Limita lo que el sitio insertado sabe sobre la URL de la página
width / height
width="560" height="315"
Reserva espacio antes de cargar; se sobrescribe con CSS
Vídeo de YouTube 16:9 responsive
aspect-ratio mantiene la forma del marco a cualquier ancho. El dominio nocookie es el modo de privacidad mejorada de YouTube.
Un widget de terceros en sandbox
Solo se vuelven a permitir los scripts y el envío de formularios. El marco no puede abrir ventanas emergentes ni navegar tu página.
Fachada de YouTube con clic para cargar
Primero la miniatura, el reproductor al hacer clic
Hasta que alguien hace clic, la página carga una sola imagen en miniatura en lugar del reproductor completo. El botón hace que siga siendo accesible con el teclado.
Formatos y presupuesto de peso
Formatos de vídeo web (consulta caniuse para ver las versiones exactas que usa tu público)
Contenedor y códec
Compatibilidad
Úsalo para
MP4, vídeo H.264, audio AAC
Todos los navegadores principales actuales
La opción segura por defecto y la fuente de respaldo
WebM, VP9
Todos los navegadores principales actuales
Archivos más pequeños con calidad similar; ponlo antes que MP4
MP4 o WebM, AV1
Versiones recientes de los navegadores principales; consulta caniuse
Los archivos más pequeños, más lentos de codificar
GIF animado
En todas partes
Evítalo para cualquier cosa de más de uno o dos segundos; un MP4 sin sonido pesa muchísimo menos
Comprimir un clip para el hero con ffmpeg
Nuestros objetivos de trabajo: 720p o 1080p, sin audio, menos de diez segundos y unos pocos megabytes como mucho. -an quita el audio, y -movflags +faststart permite que la reproducción empiece antes de que el archivo termine de descargarse.
Archivo de vídeo
Otro iframe
Generador de código de inserción
Fuente
ID o URL del vídeo
Ruta del archivo de vídeo
URL del iframe
Título (lo leen los lectores de pantalla)
Imagen poster (opcional)
Empezar en (segundos)
Autoplay (sin sonido)
Bucle
Controles
No rastrear (dnt=1)
Privacidad mejorada (nocookie)
Carga diferida
Responsive 16:9
Sandbox
Movimiento con autoplay y sin controles: añade tu propio botón de pausa para que los visitantes puedan detenerlo.