Cómo hacer embed de un video en HTML: iframe adaptable paso a paso

Hay dos formas de insertar un video en HTML. La etiqueta <video> reproduce un archivo (por ejemplo, un MP4) directamente desde tu servidor: es sencilla, pero el archivo se sirve tal cual, sin calidad adaptable ni estadísticas, y consume el ancho de banda de tu hosting.

Un iframe incrusta el reproductor de un servicio de video. El archivo se sirve desde ese servicio, con calidad adaptable, subtítulos y controles, y en tu web solo pegas una línea de código. Es lo que hacen YouTube, Vimeo o Dembed cuando te dan un «código embed».

Con la propiedad CSS aspect-ratio, compatible con todos los navegadores modernos, el iframe ocupa el ancho disponible y calcula su alto solo, sin contenedores extra:

<iframe src="https://dembed.cc/embed/v_TU_ID" title="Mi video" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>

Si tu plantilla es antigua o el editor elimina los estilos, usa el truco del contenedor: padding-top: 56,25 % equivale a la proporción 16:9 (9 ÷ 16). Es el formato que copia el botón «Adaptable» del panel de Dembed:

<div style="position:relative;width:100%;padding-top:56.25%"><iframe src="https://dembed.cc/embed/v_TU_ID" title="Mi video" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe></div>

• src: la dirección del reproductor. En Dembed tiene la forma https://dembed.cc/embed/ID.
• title: describe el video para lectores de pantalla. Es un requisito de accesibilidad y ayuda al SEO.
• allow: permisos del reproductor (autoplay, pantalla completa, imagen en imagen). Sin ellos, algunos botones no funcionan.
• allowfullscreen: permite el botón de pantalla completa.
• loading="lazy": el iframe no se carga hasta que el visitante se acerca a él. Mejora la velocidad y las Core Web Vitals.
• style="border:0": quita el borde gris que los navegadores ponen por defecto a los iframes.

Los navegadores solo permiten la reproducción automática si el video empieza sin sonido. En Dembed se activa añadiendo ?autoplay=1 al final de la dirección del embed.

Para videos verticales (Reels, Shorts, TikTok) cambia la proporción a 9/16 y limita el ancho para que no ocupe toda la pantalla en un ordenador:

<iframe src="https://dembed.cc/embed/v_TU_ID?autoplay=1" title="Mi video vertical" style="width:100%;max-width:360px;aspect-ratio:9/16;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>

• HTML propio: pégalo donde quieras que aparezca el video, dentro del <body>.
• WordPress: en un bloque «HTML personalizado» (tenemos una guía paso a paso).
• Blogger: en la «Vista HTML» de la entrada o en un gadget HTML/JavaScript.
• Wix, Webflow, Squarespace, Shopify y otros constructores: si tu plataforma tiene un bloque «HTML», «Embed» o «Código personalizado», pega ahí el iframe.

• El video no aparece y tiene alto 0: falta la proporción. Usa aspect-ratio o el contenedor con padding-top.
• Aparece «contenido bloqueado» o «contenido mixto»: tu web está en https y el iframe en http. Usa siempre la dirección https.
• «Este sitio no permite ser insertado»: algunos servicios bloquean los iframes en webs ajenas (cabeceras X-Frame-Options o frame-ancestors). Usa el enlace de embed oficial del servicio, no la página normal del video.
• El editor borra el código: cámbiate a la vista HTML o usa el bloque de HTML personalizado; los editores visuales a veces eliminan los iframes.