El Editor de bloques de Waclis permite incorporar diferentes tipos de contenido multimedia y recursos externos dentro de una Página web.

Entre los componentes disponibles encontrarás:

Componentes → Base

• Audio

• Iframe

y dentro de:

Componentes → Widgets

• Embed Video

Aunque los tres permiten incorporar contenido que va más allá de texto e imágenes, cumplen funciones diferentes.

En este tutorial aprenderás:

• cuándo utilizar Audio;

• cuándo utilizar Iframe;

• cuándo utilizar Embed Video;

• qué significa incrustar contenido;

• qué diferencia existe entre un Link y un contenido incrustado;

• cómo trabajar con videos responsive;

• por qué la proporción 16:9 es habitual;

• cómo evitar Iframes con Width fijo que se rompen en celular;

• por qué algunos sitios no permiten mostrarse dentro de un Iframe;

• qué ocurre si el contenido externo cambia o desaparece;

• cómo evitar reproducciones automáticas molestas;

• qué revisar en privacidad y rendimiento;

• cómo utilizar Navigator;

• qué precauciones tomar al editar HTML o CSS;

• cómo probar correctamente estos componentes mediante Ver página.

¿Qué componente debería utilizar?

Una guía rápida:

Audio

Utilízalo cuando quieres incorporar:

• una grabación;

• un podcast;

• una demostración sonora;

• una explicación en audio;

• un recurso musical cuando corresponda;

• contenido auditivo relacionado con la página.

Iframe

Puede utilizarse para incorporar recursos externos como:

• determinados documentos;

• calendarios;

• formularios externos;

• visualizaciones;

• aplicaciones web;

• mapas;

• otros recursos que permitan ser mostrados mediante Iframe.

Embed Video

Utilízalo cuando el objetivo específico es:

mostrar un video dentro de la Página web.

Por ejemplo:

TÍTULO

[ VIDEO ]

Descripción...

No utilices Iframe automáticamente para todo

Si existe un componente específico para la tarea, suele ser preferible comenzar por él.

Por ejemplo:

VIDEO
→ Embed Video

en lugar de construir manualmente un Iframe,

cuando el componente de video resuelve correctamente la necesidad.

¿Qué significa “incrustar” contenido?

Incrustar significa mostrar dentro de tu Página web un contenido que puede estar alojado en otro servicio.

Conceptualmente:

PÁGINA WACLIS

┌─────────────────────────────────┐
│                                 │
│  contenido de tu Página web     │
│                                 │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  │   CONTENIDO EXTERNO       │  │
│  │                           │  │
│  └───────────────────────────┘  │
│                                 │
└─────────────────────────────────┘

Por ejemplo

Un video puede estar alojado en un servicio externo,

pero visualizarse dentro de tu Página web.

El archivo no necesariamente está alojado en Waclis

La Página web muestra el recurso proporcionado por el servicio correspondiente.

Esto tiene una consecuencia importante

Si el contenido externo:

• se elimina;

• cambia;

• deja de ser público;

• modifica sus permisos;

• bloquea la incrustación;

el componente puede dejar de mostrarlo correctamente.

Waclis no controla el contenido externo

Esto debe quedar muy claro.

Agregar un Iframe o Embed Video no convierte a Waclis en propietario ni controlador del servicio incrustado.

Link vs contenido incrustado

Un Link envía al visitante hacia otro destino.

Por ejemplo:

Ver video
→ YouTube

Un contenido incrustado

permite visualizarlo directamente dentro de la página:

[ REPRODUCTOR DE VIDEO ]

¿Cuál conviene?

Depende del objetivo.

Utiliza Link cuando

• no necesitas mostrar el contenido directamente;

• quieres mantener la página más simple;

• el recurso no permite incrustación;

• el visitante puede consultarlo externamente.

Utiliza contenido incrustado cuando

• forma parte importante de la experiencia;

• verlo dentro de la página aporta valor;

• el proveedor permite su integración.

No incrustes contenido solamente porque puedes hacerlo

Cada recurso externo agrega:

• espacio;

• carga;

• complejidad;

• dependencia de otro servicio.

1. ¿Cómo utilizar Audio?

El componente Audio se encuentra dentro de:

Componentes → Base → Audio

Puede utilizarse para incorporar contenido sonoro dentro de una Section.

Ejemplo

ESCUCHA NUESTRO PODCAST

[ ▶ ───────────── 🔊 ]

En este episodio...

Otro ejemplo

EJEMPLO DE AUDIO

[ ▶ ───────────── ]

Escucha una muestra del contenido.

¿Cuándo puede ser útil Audio?

Cuando el sonido es una parte real del contenido.

Por ejemplo:

• episodio de podcast;

• explicación grabada;

• demostración de sonido;

• archivo sonoro;

• material educativo.

No utilices Audio como música automática de fondo

En general, una Página web no debería comenzar a reproducir sonido inesperadamente.

¿Por qué?

Puede resultar molesto para alguien que:

• está trabajando;

• utiliza auriculares;

• se encuentra en un lugar público;

• no esperaba sonido.

Además

los navegadores pueden limitar determinados tipos de reproducción automática, especialmente cuando incluyen sonido.

Por eso

es preferible que el visitante pueda decidir cuándo reproducir el contenido.

Audio debería tener contexto

No agregues simplemente:

[ ▶ ]

sin explicar qué va a escuchar el usuario.

Mejor

Podcast: Cómo elegir el producto adecuado

Duración aproximada: 8 minutos

[ ▶ ]

si esa información es correcta.

No inventes duración

Si mencionas:

8 minutos

debe corresponder al recurso real.

Audio vs video

Pregunta:

¿El componente visual aporta información importante?

Si necesitas mostrar:

• demostración visual;

• pantalla;

• producto en uso;

• presentación;

puede ser mejor utilizar video.

Si el contenido es completamente auditivo

Audio puede ser más simple.

Audio vs Link de descarga

También son diferentes.

Audio

permite escuchar.

Link de descarga

puede permitir obtener un archivo.

No conviertas automáticamente todo audio en descarga.

Tampoco necesitas mostrar una descarga

si solo quieres permitir reproducción.

Agregar Audio

1. abre Componentes;

2. localiza Audio;

3. incorpóralo dentro de la estructura deseada;

4. utiliza Navigator;

5. selecciona el componente;

6. revisa las opciones disponibles en Contenido.

Las opciones exactas pueden depender de la estructura utilizada

Por eso no asumiremos controles que no estén visibles en tu editor.

Lo importante es identificar

• el recurso de audio;

• su ubicación;

• el contexto visual;

• comportamiento en la página.

Navigator

Conceptualmente:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Audio

Si el Audio está dentro de una Card

podría verse:

Card
├── Heading
├── Audio
└── Paragraph

No clones solamente Audio

si necesitas duplicar toda una Card de episodio.

Clona la unidad completa

Por ejemplo:

Episode Card
├── Heading
├── Audio
├── Description
└── Link

Después actualiza

• título;

• recurso;

• descripción;

• Link;

• ID.

Error habitual

Clonas:

Episodio 1

y cambias solamente el título a:

Episodio 2

pero el reproductor sigue cargando:

Audio del Episodio 1

Prueba cada reproductor

No confíes solamente en el texto visible

Audio y mobile

El reproductor debe entrar correctamente dentro de su Container.

Evita Width rígidos como

width: 700px;

si en celular el espacio disponible es menor.

En muchos casos puede ser más adecuado:

width: 100 %

del contenedor correspondiente.

No apliques globalmente

audio {
    width: 100%;
}

sin comprobar otras instancias.

Utiliza una Class propia cuando necesites CSS adicional

Por ejemplo:

podcast-section

Y:

podcast-player

CSS conceptual:

.podcast-section .podcast-player {
    width: 100%;
}

Las Classes son ejemplos

No representan nombres obligatorios del Editor de bloques.

Audio y rendimiento

Los archivos sonoros pueden tener peso considerable.

No incorpores archivos innecesariamente grandes

si pueden optimizarse sin perjudicar la calidad necesaria.

También evita una página con

30 reproductores de audio

sin una razón.

Puede ser mejor

• seleccionar contenidos principales;

• dividirlos en páginas;

• utilizar Links.

Audio y accesibilidad

Si el audio contiene información importante,

considera proporcionar también una alternativa textual cuando sea necesario.

Por ejemplo

Audio: explicación del servicio

[ ▶ ]

Resumen:
...

No obligues al visitante a escuchar un audio

para conocer una información esencial que podría leerse.

2. ¿Cómo utilizar Iframe?

El componente:

Iframe

se encuentra dentro de:

Componentes → Base

Un Iframe permite mostrar dentro de una Página web un recurso externo compatible.

Conceptualmente

WACLIS
└── Iframe
    └── recurso externo

Puede utilizarse, según el proveedor, para

• documentos;

• aplicaciones;

• formularios;

• calendarios;

• mapas;

• visualizaciones;

• recursos externos.

Pero existe una condición fundamental

el servicio externo debe permitir ser mostrado dentro de un Iframe.

No todos los sitios permiten incrustación

Puedes intentar mostrar una página y recibir:

• un espacio vacío;

• un mensaje de error;

• un bloqueo;

• una página que no carga.

Eso no significa necesariamente que Waclis esté fallando

El sitio externo puede impedir ser mostrado dentro de otras páginas mediante sus propias políticas de seguridad.

No cualquier URL funciona en Iframe

Por ejemplo, pegar:

https://ejemplo.com

no garantiza que ese sitio permita ser incrustado.

Utiliza preferentemente

la URL o código de inserción proporcionado oficialmente por el servicio cuando exista.

Página normal vs URL para incrustar

Algunos servicios ofrecen:

URL pública normal

y:

URL específica de Embed

No siempre son intercambiables.

Ejemplo conceptual

Una página de video puede tener una URL pública:

servicio.com/watch/...

pero el código de incrustación puede utilizar una URL diferente.

Utiliza la opción de compartir o insertar del proveedor cuando corresponda.

No inventes la URL de Embed

Copia el recurso oficial.

Iframe vs Embed Video

Si solamente quieres incorporar un video:

comienza por:

Embed Video

Iframe es más genérico.

Utiliza Iframe cuando

• el contenido no tiene un componente específico;

• el proveedor ofrece una integración mediante Iframe.

Iframe vs HTML libre

Algunos proveedores entregan:

<iframe ...></iframe>

como código completo.

Si el componente Iframe espera una URL

no pegues automáticamente todo:

<iframe>
...
</iframe>

dentro de un campo destinado solamente a una dirección.

Revisa qué espera realmente el componente.

Si necesitas insertar HTML completo

puede ser necesario utilizar una herramienta distinta, como:

• HTML;

• Code;

• edición HTML;

según el caso.

No mezcles

URL

con:

código HTML completo

Antes de pegar

pregunta:

¿Este campo espera una URL o un fragmento de código?

¿Cómo agregar un Iframe?

1. abre Componentes → Base;

2. selecciona Iframe;

3. colócalo en la Section;

4. utiliza Navigator;

5. abre Contenido;

6. revisa las opciones disponibles;

7. configura el recurso correspondiente.

Estructura conceptual

Section
└── Container
    └── Iframe

O:

Grid Row
├── Column 5
│   ├── Heading
│   └── Paragraph
└── Column 7
    └── Iframe

El segundo ejemplo puede ser útil para:

explicación + recurso externo

Pero revisa mobile.

Desktop

[ TEXTO ][ IFRAME ]

Mobile

puede necesitar:

TEXTO

IFRAME

No mantengas el Iframe dentro de una columna demasiado estrecha

si su contenido deja de ser usable.

Width del Iframe

Uno de los errores más frecuentes es utilizar un ancho fijo.

Ejemplo problemático

width="900"

dentro de una pantalla móvil.

Puede generar:

• desbordamiento;

• scroll horizontal;

• contenido cortado.

Para un diseño responsive

normalmente interesa que el Iframe pueda adaptarse al ancho de su contenedor.

CSS conceptual

.mi-iframe-section iframe {
    width: 100%;
    max-width: 100%;
}

Pero utiliza siempre scope

No apliques:

iframe {
    width: 100%;
}

globalmente sin revisar otras integraciones.

Algunos Iframes pueden requerir dimensiones específicas.

Height

El alto también es importante.

Iframe muy bajo

100 px

puede cortar el contenido.

Iframe enorme

1800 px

puede crear una página excesivamente larga.

La altura adecuada depende del recurso.

No existe una Height universal

Documento

puede necesitar una altura considerable.

Video

normalmente se beneficia de una proporción fija.

Mapa

puede utilizar otra altura.

Calendario

puede necesitar todavía más espacio.

Por eso no copies:

height: 500px

a todos los Iframes.

Scroll interno

Un Iframe puede mostrar su propio scroll,

dependiendo del recurso.

Eso puede generar:

scroll de la Página web
+
scroll dentro del Iframe

Puede resultar incómodo.

Si el recurso necesita una enorme cantidad de navegación interna

pregunta si es mejor abrirlo mediante un Link externo.

Iframe y responsive del contenido externo

Aunque el Iframe sea responsive:

width: 100 %

el contenido externo también necesita estar preparado.

Por ejemplo

el contenedor puede medir:

320 px

pero el sitio externo puede estar diseñado para:

1200 px

Resultado

puede verse:

• comprimido;

• recortado;

• poco usable.

Waclis no puede corregir automáticamente el diseño interno del sitio externo.

Esta diferencia es fundamental

Puedes controlar:

el marco del Iframe

pero no necesariamente:

el CSS de la página cargada dentro

No intentes estilizar desde Waclis elementos internos de un servicio externo

como si fueran parte del HTML de tu Página web.

Son contextos separados.

Iframe y navegación externa

El recurso incrustado puede tener:

• Links;

• formularios;

• controles propios.

Pruébalos.

No asumas que porque el Iframe se ve:

todo lo que contiene funciona correctamente.

Especialmente en celular.

Iframe y seguridad

No incrustes recursos desconocidos o de procedencia dudosa.

Utiliza proveedores y contenidos confiables.

No introduzcas credenciales privadas dentro del código público del Iframe.

Nunca coloques:

• contraseñas;

• tokens secretos;

• claves privadas;

en HTML visible.

Iframe y autenticación

Algunos recursos requieren que el visitante inicie sesión.

Si incrustas:

panel privado

puede ocurrir que el visitante vea:

Iniciar sesión

o que el recurso no permita la incrustación.

No asumas que compartir un Iframe convierte contenido privado en público

Revisa cuidadosamente permisos del servicio externo.

Iframe y privacidad

Al cargar contenido de terceros,

el navegador del visitante puede comunicarse con ese proveedor.

Dependiendo del servicio y de su configuración,

pueden cargarse:

• recursos externos;

• cookies;

• sistemas de medición;

• otros elementos del proveedor.

Evalúa qué servicios externos estás incorporando

y mantén coherencia con las políticas correspondientes de tu Página web.

No copies Iframes desconocidos de Internet

solamente porque visualmente funcionan.

Iframe y rendimiento

Cada Iframe puede implicar cargar una página o recurso externo adicional.

Una Página web con:

10 Iframes

puede necesitar considerablemente más recursos.

Pregunta si todos son necesarios.

Por ejemplo

en lugar de:

5 mapas diferentes

puede ser más apropiado:

• un solo mapa;

• una lista de ubicaciones;

• Links.

3. ¿Cómo utilizar Embed Video?

El componente:

Embed Video

se encuentra dentro de:

Componentes → Widgets

Está orientado específicamente a incorporar contenido de video.

Puede ser útil para

• videotutoriales;

• presentación de empresa;

• demostraciones;

• casos;

• explicaciones;

• contenido educativo;

• campañas.

Ejemplo

¿CÓMO FUNCIONA?

Mira este video explicativo.

[ VIDEO ]

Más información...

Embed Video vs Slider

Embed Video reproduce un video.

Slider cambia entre Slides.

No confundas:

video

con:

secuencia de imágenes

Embed Video vs Image

Una miniatura:

[ IMAGE CON BOTÓN ▶ ]

no necesariamente es un video real.

Si quieres reproducción dentro de la página

utiliza un componente de video adecuado.

No dibujes un icono Play sobre una Image

si después no ocurre nada.

Eso crea una interacción falsa.

¿Cómo agregar Embed Video?

1. abre Componentes;

2. localiza Widgets;

3. selecciona Embed Video;

4. agrégalo en la Section;

5. utiliza Navigator;

6. selecciona el componente;

7. revisa las opciones disponibles en Contenido;

8. configura el recurso según el proveedor o formato aceptado.

No asumiremos proveedores concretos

dentro de este componente si no aparecen en la configuración seleccionada.

Utiliza el formato solicitado por el editor

URL normal vs código Embed

Mismo principio que con Iframe.

Si el componente solicita:

URL

proporciona una URL válida.

No pegues:

<iframe ...>

en un campo de URL

salvo que la opción diga expresamente que admite código.

Video responsive

Este es uno de los puntos más importantes.

Muchos videos utilizan proporción:

16:9

Por ejemplo:

1920 × 1080

O:

1280 × 720

La proporción es la misma.

Conceptualmente

┌──────────────────────────────┐
│                              │
│            VIDEO             │
│                              │
└──────────────────────────────┘

Si fuerzas:

width: 100 %
height: 100px

puedes deformar o comprimir el reproductor.

Mantén una relación coherente.

CSS moderno conceptual

Si necesitas un wrapper personalizado:

.video-section .video-wrapper {
    aspect-ratio: 16 / 9;
}

Y el contenido:

.video-section .video-wrapper iframe,
.video-section .video-wrapper video {
    width: 100%;
    height: 100%;
}

Estos selectores son ejemplos

Debes adaptarlos a la estructura real del componente.

No agregues un wrapper nuevo si el componente ya administra correctamente su proporción

Primero prueba el comportamiento actual.

Video vertical

No todos los videos son 16:9.

Puedes tener:

9:16

por ejemplo un video vertical.

No fuerces 16:9 si el recurso es vertical.

Pregunta qué formato tiene realmente el video.

Ejemplo vertical

┌───────────┐
│           │
│           │
│   VIDEO   │
│           │
│           │
└───────────┘

Un video vertical ocupando toda la pantalla desktop

puede resultar excesivo.

Puedes limitar su Max Width mediante un Container adecuado.

Video cuadrado

También puede existir:

1:1

Mantén la proporción original.

No deformes el reproductor

Embed Video dentro de Grid

Desktop:

[ VIDEO ][ TEXTO ]

puede funcionar.

Por ejemplo:

Grid Row
├── Column 7
│   └── Embed Video
└── Column 5
    ├── Heading
    ├── Paragraph
    └── Button

Mobile:

VIDEO

TEXTO

Revisa el orden.

Si el video explica el texto

puede ser conveniente:

Heading
Paragraph
Video

No existe una única solución.

Video de ancho completo

Puede utilizar:

Section
└── Container
    └── Embed Video

No necesitas necesariamente:

100 % de la pantalla

En monitores muy grandes

un video de extremo a extremo puede ser excesivo.

Un Container Boxed puede ofrecer mejor experiencia.

Video en Banner

No confundas:

Video reproductor

con:

Background Video

Una Section dispone de opción de Background:

• None;

• Image;

• Video.

Background Video

es parte del diseño de la Section.

Embed Video

es un reproductor de contenido.

Ejemplo Background Video

[ VIDEO DE FONDO ]

Título

CTA

Ejemplo Embed Video

Título

[ ▶ VIDEO ]

Descripción

No utilices Background Video para un tutorial que necesita controles de reproducción

Del mismo modo

no conviertas un video decorativo de fondo en un gran reproductor si no aporta contenido.

Autoplay de video

Utilízalo con especial cuidado.

Un video que comienza automáticamente:

• puede distraer;

• consume recursos;

• puede utilizar datos móviles;

• puede generar sonido inesperado.

Los navegadores también pueden restringir determinados comportamientos de reproducción automática.

Para videos de contenido

es normalmente más cómodo que el usuario decida cuándo reproducir.

Video de fondo

puede seguir reglas diferentes,

pero debería utilizarse:

• sin depender del audio;

• con moderación;

• revisando rendimiento.

No uses Background Video únicamente para “hacer la página más moderna”

si afecta claridad o carga.

Controles de reproducción

No ocultes controles esenciales mediante CSS

sin comprender qué experiencia estás creando.

Si el visitante necesita:

• pausar;

• avanzar;

• ajustar volumen;

debe poder interactuar según las opciones del reproductor.

No conviertas un video largo en un elemento imposible de pausar.

Miniatura

Los proveedores pueden mostrar una miniatura.

Revisa que:

• represente correctamente el video;

• no contenga información obsoleta;

• tenga calidad suficiente.

Si el proveedor controla la miniatura

debes administrarla desde el propio servicio cuando corresponda.

Waclis no necesariamente controla todos los elementos internos del reproductor externo.

Título y descripción alrededor del video

No dependas únicamente del reproductor.

Es útil contextualizar:

Videotutorial: Configuración inicial

En este video aprenderás...

Esto ayuda incluso antes de reproducir.

Duración

Puedes mencionar:

Duración: 6 minutos

si la información es correcta.

No inventes o dejes una duración desactualizada después de reemplazar el video.

Si clonas una Card de video

Actualiza:

• título;

• descripción;

• video;

• duración;

• Link;

• ID.

Error habitual

Título:
Configuración de usuarios

Video:
Tutorial de productos

Siempre reproduce unos segundos

para confirmar que el recurso correcto quedó configurado.

Reemplazar un video

No basta con ver la miniatura.

Después de guardar:

1. utiliza Ver página;

2. reproduce;

3. comprueba el contenido;

4. prueba pantalla completa si está disponible;

5. revisa mobile.

Video eliminado o privado

Si el proveedor elimina el video o cambia sus permisos,

puede aparecer:

• error;

• video no disponible;

• solicitud de acceso.

El bloque de Waclis puede seguir existiendo

pero el recurso externo ya no estar disponible.

Mantén los videos incrustados en tu rutina de mantenimiento.

Video y privacidad

Igual que con Iframe,

un reproductor externo puede cargar recursos del proveedor.

Evalúa:

• qué plataforma utilizas;

• qué contenido incrustas;

• qué implicancias tiene en las políticas de tu sitio.

No incrustes reproductores desconocidos.

Video y rendimiento

Un reproductor externo suele ser más pesado que:

una Image

Si tienes:

8 videos

en una misma página,

puede aumentar considerablemente la cantidad de recursos cargados.

Pregunta si todos deben estar incrustados.

Alternativa

Puedes mostrar:

Image / miniatura
+
título
+
Link

hacia una página de videos

cuando no necesitas cargar todos simultáneamente.

No reemplaces automáticamente todos los Links por reproductores.

Un solo video principal

puede ser más efectivo.

Multimedia y Navigator

Repasemos las estructuras conceptuales.

Audio

Audio

Iframe

Iframe

Embed Video

Embed Video
└── reproductor / contenido externo

Si están dentro de Card

Card
├── Heading
├── Embed Video
├── Paragraph
└── Link

Antes de clonar

decide qué unidad necesitas.

Si quieres otro video completo

clona:

Card

No solamente:

Embed Video

si necesitas también:

• título;

• descripción.

Seleccionar padre

Puede ayudarte a pasar desde el contenido multimedia hasta:

• wrapper;

• Card;

• Column;

• Section.

Pero comprueba el nivel antes de eliminar.

Eliminar

Waclis no solicita confirmación.

Si quieres retirar un Iframe

y seleccionas:

Section

por error,

puedes eliminar toda la Section.

Utiliza:

Deshacer

inmediatamente.

No dejes wrappers vacíos

Por ejemplo

Card
├── Heading
├── [ Iframe eliminado ]
└── Paragraph

puede seguir funcionando

si la Card todavía tiene sentido.

Pero si era:

Video Card

quizá deberías retirar la Card completa.

Classes e IDs

Aplica la misma regla:

ID
→ único

Class
→ puede compartirse

Puedes utilizar una Class común

para varios reproductores:

media-player

Pero si necesitan proporciones diferentes

por ejemplo:

16:9

y:

9:16

pueden necesitar Classes adicionales.

Ejemplo

media-player video-horizontal

Y:

media-player video-vertical

No fuerces todas las instancias con una sola regla de Height.

Linked styles

Si varios reproductores comparten una Class:

cambios de estilo pueden afectar todos.

Esto puede ser correcto para:

• Border radius;

• espacio;

• ancho.

Pero no necesariamente para:

• Height;

• proporción.

Revisa Linked styles antes de cambiar.

Background y Border radius

Puedes utilizar un wrapper alrededor del contenido multimedia.

Por ejemplo:

Video Wrapper
└── Embed Video

El wrapper puede controlar:

• Border radius;

• Border;

• sombra.

Si aplicas Border radius solamente al contenedor

pero el contenido interno sobresale,

puede ser necesario controlar Overflow.

Por ejemplo conceptualmente:

.video-section .video-wrapper {
    border-radius: 16px;
    overflow: hidden;
}

Pero recuerda

overflow: hidden puede afectar controles o elementos que sobresalen.

Prueba el componente real.

No lo apliques globalmente a todos los Iframes.

CSS global peligroso: Iframe

Evita:

iframe {
    width: 100%;
    height: 600px;
}

Puede afectar:

• videos;

• mapas;

• calendarios;

• documentos;

• formularios externos.

Todos pueden necesitar alturas diferentes.

Utiliza scope

Por ejemplo:

.calendar-section iframe {
    width: 100%;
    height: 700px;
}

solo si corresponde al recurso real.

CSS global peligroso: Audio

Evita:

audio {
    height: 100px;
}

sin necesidad.

CSS global peligroso: Video

Evita:

video,
iframe {
    height: 300px !important;
}

Esto puede deformar elementos de diferentes proporciones.

No utilices !important como primera solución

Iframe y position

No utilices:

position: absolute;

solamente para colocarlo visualmente.

Puede salir del flujo de la página y superponerse.

Utiliza Grid y Container.

Video responsive sin posiciones rígidas

Prioriza:

Section
↓
Container
↓
Grid
↓
Embed Video

En lugar de:

left: 300px
top: 150px
width: 800px

Multimedia y ancho completo

No confundas:

width: 100 %

con:

100 % de la pantalla

Si está dentro de Container:

100 %
→ del Container

Esto suele ser deseable.

Si realmente necesitas Full

revisa la Section.

No fuerces:

width: 100vw;

sin evaluar scroll horizontal.

Iframe y 100vh

Tampoco utilices:

height: 100vh;

automáticamente.

Puede ocupar toda la pantalla aunque el contenido no lo necesite.

Utiliza una altura basada en el recurso.

Embed Video y aspect ratio

Una técnica útil es pensar en proporciones.

Horizontal tradicional:

16:9

Cuadrado:

1:1

Vertical:

9:16

No conviertas:

9:16

en:

16:9

a la fuerza.

Puede generar:

• grandes espacios;

• deformación;

• recorte.

Utiliza la proporción real del contenido.

Multimedia dentro de Cards

Ejemplo:

╭────────────────────────────╮
│                            │
│      [ VIDEO 16:9 ]        │
│                            │
│  Tutorial de configuración │
│                            │
│  Descripción breve.        │
│                            │
╰────────────────────────────╯

Si tienes tres Cards:

[ VIDEO ][ VIDEO ][ VIDEO ]

en desktop,

pueden quedar demasiado pequeñas.

Pregunta si:

• dos por fila;

• una destacada;

sería mejor.

Videos necesitan más espacio que muchas Cards de texto.

En celular

normalmente pueden ocupar:

100 % de la columna

Multimedia dentro de Tabs

Puede utilizarse:

Tabs
└── Panel
    └── Embed Video

Después de guardar

prueba:

1. abrir la Tab;

2. reproducir;

3. cambiar de Tab;

4. volver;

5. comprobar comportamiento.

No asumas que un video oculto funciona igual que uno visible desde el comienzo.

Multimedia dentro de Accordeon

Mismo principio.

Puede existir:

¿Ver videotutorial? +

y al abrir:

[ VIDEO ]

Pregunta si realmente aporta.

Si el video es importante

puede merecer estar visible directamente.

No escondas todo el contenido multimedia detrás de varias interacciones.

Iframe dentro de Carousel o Slider

En general aumenta la complejidad.

Por ejemplo:

Carousel
└── Slide
    └── Iframe

puede tener interacción dentro de interacción.

El usuario puede intentar:

• arrastrar el Iframe;

• mover el Carousel;

y producir conflictos de gestos.

Evita anidar interacciones complejas sin necesidad.

Lo mismo aplica a video dentro de Carousel

Puede funcionar en determinados diseños,

pero requiere pruebas especialmente cuidadosas en touch.

Contenido externo y mantenimiento

Crea una rutina para revisar periódicamente:

• videos;

• documentos;

• calendarios;

• formularios;

• Iframes;

• audios.

Especialmente si son externos

Un bloque puede seguir mostrando:

recurso no disponible

durante meses

si nadie lo revisa.

Verifica después de cambios del proveedor.

Si cambia una URL

actualiza la integración.

Si un recurso se elimina

retira el bloque o reemplázalo.

No dejes espacios rotos.

Contenido externo y disponibilidad

No prometas:

disponible siempre

si depende de un servicio externo.

Puede existir:

• caída del proveedor;

• mantenimiento;

• cambio de permisos.

Mantén una alternativa cuando el contenido sea crítico

Por ejemplo:

¿No puedes ver el video?
Verlo en la plataforma correspondiente →

puede ser útil cuando existe un destino externo válido.

Pero no es obligatorio en todos los casos.

Link alternativo

Puede ser especialmente útil para:

• documentos;

• videos;

• recursos.

Si el Iframe falla

el visitante aún puede acceder mediante Link.

No pongas un Link que requiera permisos que el visitante no posee.

Audio y transcripción

Si el contenido es informativo,

una transcripción o resumen puede aportar:

• accesibilidad;

• búsqueda;

• comprensión rápida.

No necesitas duplicar palabra por palabra todo audio

si un resumen cumple el objetivo,

salvo que necesites una transcripción completa por otra razón.

Video y texto complementario

Mismo principio.

El visitante puede:

• no querer reproducir;

• no tener audio;

• disponer de poco tiempo.

Un resumen ayuda.

Por ejemplo

En este video aprenderás:

- cómo ingresar;
- cómo configurar;
- cómo guardar cambios.

No sustituyas todo el contenido de una página por:

“Mira este video”

si la información también puede ser útil en texto.

Multimedia y SEO

No utilices Audio o Video suponiendo que:

el simple hecho de agregarlos mejorará automáticamente el posicionamiento.

Utilízalos porque ayudan al visitante.

Títulos y textos claros

siguen siendo importantes.

Multimedia y consentimiento

Si utilizas servicios externos que cargan contenido de terceros:

revisa las políticas de privacidad aplicables a tu sitio.

Este tutorial no sustituye asesoramiento legal

Las obligaciones pueden depender de:

• país;

• proveedor;

• tipo de seguimiento;

• configuración.

No copies avisos de privacidad de otra Página web

sin confirmar que correspondan a tu caso.

HTML del elemento

Para casos avanzados puedes utilizar:

Editar código HTML <>

Especialmente útil para Iframe

porque puedes identificar propiedades como:

• src;

• Width;

• Height;

• atributos adicionales.

Pero no necesitas editar HTML para:

• mover el bloque;

• cambiar Margin;

• cambiar Border radius.

Utiliza primero las herramientas visuales.

No elimines atributos de Iframe al azar

Algunos pueden controlar:

• permisos;

• presentación;

• funcionamiento.

Si no sabes qué hace un atributo:

no lo elimines solamente para simplificar el código.

Especial cuidado al copiar Embed Codes

Un proveedor puede darte:

<iframe
    src="..."
    ...
></iframe>

No elimines partes aleatoriamente

Primero identifica:

• URL;

• Width;

• Height;

• permisos;

• atributos.

Si necesitas adaptarlo a Waclis

haz los cambios mínimos.

Code editor global

No lo utilices para un cambio simple de recurso.

Si únicamente necesitas reemplazar:

Video A

por:

Video B

utiliza la configuración del componente.

JavaScript

No agregues JavaScript para hacer responsive un video.

CSS suele ser suficiente.

Tampoco agregues JavaScript para reproducir automáticamente

sin una necesidad real.

Evita scripts externos de procedencia desconocida.

El contenido incrustado ya puede cargar JavaScript del propio proveedor

No añadas más dependencias innecesariamente.

Ejemplo práctico 1: videotutorial

Queremos:

CÓMO CONFIGURAR TU CUENTA

En este videotutorial...

[ VIDEO ]

¿Necesitas más información?
[ VER AYUDA ]

Paso 1

Agrega Heading.

Paso 2

Agrega Paragraph.

Paso 3

Agrega Embed Video.

Paso 4

Configura el recurso.

Paso 5

Revisa la proporción.

Paso 6

Agrega Link o Button complementario si corresponde.

Paso 7

Revisa desktop.

Paso 8

Revisa mobile.

Paso 9

Guardar Cambios.

Paso 10

Ver página.

Paso 11

Reproduce el video.

Paso 12

Prueba el CTA.

Ejemplo práctico 2: audio de podcast

PODCAST

Cómo comenzar

[ AUDIO ]

En este episodio...

Revisa:

• recurso;

• título;

• descripción;

• mobile.

No configures reproducción automática sin una necesidad clara.

Ejemplo práctico 3: documento externo

DOCUMENTACIÓN

[ IFRAME ]

Abrir documento en una nueva página →

Esto puede ser útil

si el proveedor permite la incrustación.

Si no la permite

utiliza:

[ ABRIR DOCUMENTO ]

como Link.

No fuerces una integración bloqueada.

Ejemplo práctico 4: calendario externo

AGENDA

[ CALENDARIO INCRUSTADO ]

Revisa especialmente:

• Width;

• Height;

• mobile;

• navegación interna.

Un calendario desktop puede necesitar demasiado ancho.

Comprueba celular real.

Ejemplo práctico 5: formulario externo

SOLICITUD

[ FORMULARIO EXTERNO ]

Después de incrustarlo:

realiza una prueba real.

No asumas que funciona porque se ve.

Completa:

• campos;

• envío;

• confirmación.

Comprueba que la información llegue al proveedor correspondiente.

Ejemplo práctico 6: video vertical

VIDEO CORTO

     ┌─────────┐
     │         │
     │  VIDEO  │
     │         │
     │         │
     └─────────┘

No lo estires horizontalmente.

Puedes colocarlo dentro de un Container de ancho limitado.

Ejemplo práctico 7: video + texto

Desktop:

[      VIDEO      ][    TEXTO    ]

Mobile:

VIDEO

TEXTO

Utiliza:

Grid Row

No posiciones mediante valores left y top.

¿Qué hacer si Audio no reproduce?

Revisa:

1. recurso configurado;

2. si está disponible;

3. formato admitido por el navegador;

4. cambios realizados;

5. Ver página.

No agregues JavaScript inmediatamente.

¿Qué hacer si el reproductor no aparece?

Utiliza Navigator.

Confirma que Audio siga dentro de la estructura.

También revisa CSS:

• display;

• visibility;

• Width;

• Height.

¿Qué hacer si Audio desborda en celular?

Revisa su Width y contenedor.

No ocultes overflow de toda la página.

¿Qué hacer si Iframe queda en blanco?

Puede deberse a:

• URL incorrecta;

• recurso eliminado;

• permisos;

• proveedor que bloquea incrustación.

Prueba primero la URL original.

Después verifica si el servicio ofrece una opción oficial de Embed.

No asumas que el problema está en Waclis.

¿Qué hacer si aparece “refused to connect” o un mensaje equivalente?

Puede significar que el servicio externo no permite ser mostrado dentro de un Iframe.

Utiliza la integración oficial o un Link.

No intentes evadir las restricciones del proveedor.

¿Qué hacer si Iframe se ve bien en desktop pero mal en celular?

Revisa:

• Width;

• Height;

• Container;

• contenido externo.

Si el marco es responsive pero el recurso interno no:

quizá el proveedor no ofrece una experiencia móvil adecuada.

No siempre puedes resolverlo desde CSS de Waclis.

¿Qué hacer si el Iframe genera scroll horizontal?

Identifica si desborda:

el Iframe

o:

el contenido dentro del Iframe

Si es el marco:

corrige Width.

Si es el contenido externo:

puede depender del proveedor.

No utilices overflow-x:hidden globalmente.

¿Qué hacer si el Iframe queda demasiado bajo?

Ajusta Height según el recurso.

No existe un valor universal.

¿Qué hacer si queda demasiado alto?

Mismo principio.

No mantengas grandes zonas vacías.

¿Qué hacer si un sitio dejó de permitir Embed?

Utiliza:

• otra integración oficial;

• Link externo;

si corresponde.

No puedes obligar desde el Editor de bloques a un proveedor externo a aceptar Iframe.

¿Qué hacer si el video no aparece?

Revisa:

• recurso;

• permisos;

• URL;

• formato esperado por Embed Video.

No pegues automáticamente el código completo de Iframe en un campo de URL.

¿Qué hacer si el video dice “privado”?

Cambia los permisos desde el proveedor

si realmente debe ser público.

No es un problema de diseño del bloque.

¿Qué hacer si el video fue eliminado?

Reemplázalo.

¿Qué hacer si la miniatura es incorrecta?

Revisa el recurso configurado.

Si la miniatura pertenece al proveedor:

puede necesitar modificarse allí.

¿Qué hacer si el video se deforma?

Revisa:

• Width;

• Height;

• aspect ratio.

Mantén la proporción original.

¿Qué hacer si el video horizontal queda demasiado pequeño?

Revisa la columna.

Puede necesitar:

Column 12

en lugar de:

Column 4

No aumentes el video fuera de su contenedor mediante Width rígido.

¿Qué hacer si un video vertical ocupa demasiado?

Limita el ancho del contenedor.

No cambies su relación 9:16.

¿Qué hacer si quiero una miniatura que abra el video externamente?

Entonces quizá no necesitas Embed Video.

Puedes utilizar:

Image
+
Link

Esto puede ser más liviano.

¿Qué hacer si quiero reproducir el video dentro de la página?

Utiliza Embed Video.

¿Qué hacer si necesito un mapa?

Waclis dispone de componentes específicos como:

• Google Maps;

• Open Street Map.

Antes de construir un mapa genérico mediante Iframe:

evalúa los componentes específicos.

Los veremos en el próximo tutorial.

¿Qué hacer si necesito YouTube, Vimeo u otro proveedor específico?

El Editor de bloques también cuenta con una categoría de:

Incrustados

con diferentes proveedores.

Esos componentes se abordarán en su tutorial específico.

Para una integración de proveedor concreto

puede ser preferible utilizar el componente dedicado cuando esté disponible.

Iframe sigue siendo una alternativa genérica

cuando el servicio ofrece un código compatible.

¿Qué hacer si tengo muchos videos?

No necesariamente incrustes todos.

Puedes organizar:

Video destacado
+
Cards con Links

Esto reduce complejidad.

¿Qué hacer si tengo muchos audios?

Mismo principio.

Considera una página dedicada.

¿Qué hacer si el contenido externo tarda mucho en cargar?

Puede depender de:

• proveedor;

• tamaño;

• conexión.

Reduce la cantidad de recursos simultáneos.

No puedes optimizar completamente desde Waclis un servicio externo.

¿Qué hacer si el proveedor tiene una caída?

El contenido puede no estar disponible.

Una alternativa mediante Link o texto puede ser útil para recursos críticos.

¿Qué hacer si quiero ocultar un Iframe en mobile?

No lo hagas solamente porque no entra.

Primero intenta:

• adaptar Width;

• cambiar composición;

• utilizar un Link alternativo.

Ocultarlo debería ser una decisión de contenido,

no una solución rápida de responsive.

¿Qué hacer si quiero tener una versión desktop y otra mobile?

Evita duplicar contenido cuando una sola versión responsive puede funcionar.

Duplicar puede generar:

• dos Iframes cargándose;

• recursos duplicados;

• IDs repetidos;

• mantenimiento doble.

Utiliza una estructura única cuando sea posible.

¿Qué hacer si quiero un borde alrededor del video?

Utiliza el wrapper o estilo adecuado.

No modifiques el Iframe interno si un contenedor externo puede resolverlo.

¿Qué hacer si quiero sombra?

Mismo principio.

Aplica el estilo al contenedor cuando sea más seguro.

¿Qué hacer si cambio Border radius y se cortan controles?

Revisa:

overflow

del wrapper.

Puede estar ocultando elementos.

No aumentes z-index indiscriminadamente.

¿Qué hacer si al cambiar CSS se rompieron todos los Iframes?

Busca selectores globales como:

iframe {
}

O:

video {
}

Limita el CSS a la sección.

¿Qué hacer si un Iframe tiene Height diferente al resto?

Puede ser completamente correcto.

Un:

mapa

y un:

calendario

no necesitan la misma altura.

No busques uniformidad artificial entre recursos diferentes.

IA para decidir entre Link, Iframe o Embed

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo este recurso externo:

[describir]

Necesito decidir cómo mostrarlo en una Página web Waclis:

- Link;
- Iframe;
- Embed Video;
- otro componente específico.

Analiza:
- experiencia del usuario;
- responsive;
- rendimiento;
- dependencia del proveedor.

No inventes funcionalidades de Waclis.

IA para revisar un código Iframe

Este proveedor me entregó este código:

[pegar iframe]

Necesito utilizarlo en Waclis.

Identifica:
- src;
- width;
- height;
- atributos adicionales;
- posibles valores fijos que podrían afectar responsive.

No elimines atributos.
No modifiques todavía el código.

IA para hacerlo responsive

Tengo este Iframe:

[pegar]

Está dentro de:
.external-resource-section

Necesito:
- ancho responsive;
- no generar scroll horizontal;
- conservar una altura adecuada;
- no afectar otros Iframes de Waclis.

Waclis utiliza Bootstrap 4.

No agregues JavaScript.
No cambies la URL.

Devuélveme CSS limitado a .external-resource-section.

IA para video 16:9

Tengo un video 16:9 dentro de Waclis.

Raíz:
.video-section

Wrapper:
.video-wrapper

Necesito:
- mantener proporción 16:9;
- ancho 100 % del Container;
- responsive;
- no deformar;
- no afectar otros Iframes o videos.

Waclis utiliza Bootstrap 4.

No agregues JavaScript.
Devuélveme solamente CSS localizado.

IA para video vertical

Tengo un video vertical 9:16.

Debe mostrarse dentro de:
.vertical-video-section

Necesito:
- conservar 9:16;
- limitar el ancho en desktop;
- ocupar correctamente el ancho disponible en celular;
- centrarlo sin margin-left rígido.

No agregues JavaScript.
Devuélveme una solución CSS localizada.

IA para detectar CSS peligroso

Revisa este CSS:

[pegar]

Busca reglas globales que puedan afectar contenido multimedia:

iframe
video
audio
embed
object

También revisa:
- width;
- height;
- position;
- overflow;
- transform;
- display.

Indica qué reglas pueden afectar otros Widgets de Waclis.

No modifiques el código.

IA para comparar el diseño antes/después

Este video se ve correctamente en desktop pero desborda en celular.

HTML:
[pegar únicamente el componente]

CSS:
[pegar únicamente CSS relacionado]

Identifica si la causa está en:
- Width fija;
- Min Width;
- Height;
- Position;
- Container;
- Grid Column.

No utilices overflow-x:hidden como solución.

IA para diagnosticar un Iframe bloqueado

Intento mostrar esta clase de recurso mediante Iframe:

[describir proveedor/recurso]

El navegador muestra:
[pegar mensaje]

Explícame si parece:
- URL incorrecta;
- restricción de incrustación del proveedor;
- problema de permisos.

No propongas mecanismos para evadir restricciones de seguridad.

IA para revisar página con muchos embeds

Tengo una página con:

[lista de videos, Iframes y audios]

Analiza cuáles necesitan estar incrustados directamente y cuáles podrían sustituirse por:
- Image + Link;
- CTA;
- página específica.

Objetivo:
reducir complejidad y carga sin eliminar contenido importante.

No inventes nuevos recursos.

IA para redactar contexto de video

Tengo este video:

Título:
[título]

Contenido:
[resumen]

Redacta:
- Heading de máximo 8 palabras;
- introducción de máximo 30 palabras;
- lista de 3 puntos sobre lo que aprenderá el usuario.

No inventes información que no esté en el resumen.

IA para audio

Tengo este audio:

[descripción]

Necesito una introducción breve para una Página web.

Incluye:
- qué contiene;
- para quién puede ser útil.

No inventes duración ni participantes.

Buenas prácticas para Audio

Recomendamos:

• utilizarlo cuando el sonido aporte contenido;

• explicar qué escuchará el usuario;

• evitar reproducción automática innecesaria;

• probar el recurso real;

• utilizar Width responsive;

• limitar cantidad de reproductores;

• proporcionar contexto textual.

Buenas prácticas para Iframe

Recomendamos:

• utilizar recursos confiables;

• confirmar que el proveedor permite incrustación;

• utilizar URLs o códigos oficiales;

• diferenciar URL de código HTML;

• controlar Width y Height;

• revisar mobile;

• limitar cantidad de Iframes;

• no almacenar credenciales privadas;

• probar contenido y controles internos;

• mantener recursos externos actualizados.

Buenas prácticas para Embed Video

Recomendamos:

• utilizarlo para videos relevantes;

• respetar proporción;

• revisar 16:9, 9:16 o formato real;

• evitar autoplay con sonido;

• mantener contexto textual;

• probar reproducción;

• revisar mobile;

• comprobar cada CTA relacionado;

• limitar cantidad de reproductores;

• mantener videos externos disponibles.

Errores frecuentes

Utilizar Iframe para un video cuando existe Embed Video

Comienza por el componente específico.

Utilizar Embed Video para contenido que no es video

Utiliza el componente apropiado.

Pegar HTML completo en un campo que espera URL

Revisa qué formato solicita.

Pegar una URL pública normal cuando el proveedor exige una URL Embed

Utiliza la opción oficial de inserción.

Creer que cualquier sitio puede mostrarse en Iframe

Algunos proveedores lo bloquean.

Culpar a Waclis cuando el proveedor impide la incrustación

Comprueba primero la política del servicio externo.

Forzar un Iframe bloqueado

Utiliza una integración permitida o un Link.

Width fijo demasiado grande

Puede romper mobile.

Height fija universal para todos los Iframes

Cada recurso necesita una altura diferente.

Aplicar CSS global sobre iframe

Puede afectar mapas, videos, calendarios y otros recursos.

Utilizar overflow-x:hidden para esconder un Iframe desbordado

Corrige el elemento.

Pretender modificar desde Waclis el contenido interno de una página externa

No necesariamente tienes acceso a sus estilos.

Incrustar demasiados recursos externos

Puede afectar rendimiento.

Colocar credenciales privadas dentro del código de Embed

Nunca.

Utilizar recursos de proveedores desconocidos

Prioriza fuentes confiables.

Confiar en que un Iframe externo estará siempre disponible

Depende del proveedor.

No revisar permisos del recurso

Puede aparecer como privado.

Utilizar música automática de fondo

Evita sonido inesperado.

Reproducir automáticamente un video con sonido

Puede resultar molesto y ser bloqueado por el navegador.

Dibujar un icono Play sobre una Image sin funcionalidad

No simules interacción.

Deformar video 16:9

Mantén proporción.

Forzar un video vertical a 16:9

Respeta su formato.

Colocar un video dentro de una columna demasiado estrecha

Revisa Grid.

No revisar el recorte o proporción en celular

Prueba cada tamaño.

Incrustar ocho videos cuando un Link sería suficiente

Simplifica.

Creer que la miniatura está controlada siempre desde Waclis

Puede pertenecer al proveedor.

No reproducir el video después de reemplazarlo

Comprueba el contenido real.

Dejar títulos o duraciones del video anterior después de clonar

Actualiza todo.

Duplicar IDs al clonar Cards multimedia

Mantén IDs únicos.

Aplicar CSS global sobre audio

Puede afectar otros reproductores.

Aplicar CSS global sobre video

Puede afectar Background Video u otros recursos.

Utilizar Position absolute para organizar multimedia

Utiliza Grid.

Abrir Code editor global para un cambio de URL

Utiliza la configuración del componente.

Agregar JavaScript para una adaptación responsive

Normalmente CSS y estructura son suficientes.

No probar el contenido mediante Ver página

La interacción real debe comprobarse.

Flujo recomendado para Audio

1. DEFINIR EL CONTENIDO SONORO
↓
2. AGREGAR AUDIO
↓
3. REVISAR NAVIGATOR
↓
4. CONFIGURAR EL RECURSO
↓
5. AGREGAR TÍTULO / CONTEXTO
↓
6. REVISAR RESPONSIVE
↓
7. GUARDAR CAMBIOS
↓
8. VER PÁGINA
↓
9. REPRODUCIR EL AUDIO

Flujo recomendado para Iframe

1. DEFINIR EL RECURSO EXTERNO
↓
2. CONFIRMAR QUE PERMITE INCRUSTACIÓN
↓
3. OBTENER URL / CÓDIGO OFICIAL
↓
4. AGREGAR IFRAME
↓
5. REVISAR NAVIGATOR
↓
6. CONFIGURAR EL RECURSO
↓
7. AJUSTAR WIDTH / HEIGHT
↓
8. REVISAR DESKTOP
↓
9. REVISAR TABLET
↓
10. REVISAR CELULAR
↓
11. GUARDAR CAMBIOS
↓
12. VER PÁGINA
↓
13. PROBAR EL CONTENIDO EXTERNO

Flujo recomendado para Embed Video

1. DEFINIR EL VIDEO
↓
2. AGREGAR EMBED VIDEO
↓
3. CONFIGURAR EL RECURSO
↓
4. REVISAR NAVIGATOR
↓
5. COMPROBAR LA PROPORCIÓN
↓
6. AGREGAR CONTEXTO TEXTUAL
↓
7. REVISAR DESKTOP
↓
8. REVISAR TABLET
↓
9. REVISAR CELULAR
↓
10. GUARDAR CAMBIOS
↓
11. VER PÁGINA
↓
12. REPRODUCIR EL VIDEO
↓
13. PROBAR CONTROLES Y LINKS

Checklist de Audio

• El audio aporta información real.

• El usuario sabe qué va a escuchar.

• El recurso correcto está configurado.

• No se reproduce inesperadamente sin una razón.

• El reproductor cabe en desktop.

• El reproductor cabe en celular.

• No existe Width fijo problemático.

• El contenido sigue disponible.

• Agregué contexto textual cuando corresponde.

• Probé la reproducción mediante Ver página.

Checklist de Iframe

• El recurso necesita realmente un Iframe.

• No existe un componente específico más apropiado.

• Utilizo un proveedor confiable.

• El proveedor permite incrustación.

• Utilicé la URL o código apropiado.

• No confundí URL con HTML.

• Width se adapta correctamente.

• Height es adecuada para el contenido.

• No existe scroll horizontal inesperado.

• El recurso externo se ve correctamente.

• Sus controles internos funcionan.

• Mobile sigue siendo usable.

• No coloqué credenciales privadas.

• Comprendo que el recurso depende de un tercero.

• Tengo un Link alternativo si es necesario.

• Probé el contenido mediante Ver página.

Checklist de Embed Video

• El video aporta valor.

• Es el video correcto.

• Los permisos permiten visualizarlo.

• La proporción corresponde al contenido.

• No deformé 16:9, 9:16 u otra relación.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• El texto sobre el video mantiene contraste si existe.

• Los controles son utilizables.

• No configuré autoplay molesto.

• La miniatura corresponde al video.

• Título y descripción están actualizados.

• La duración está actualizada si la menciono.

• Los CTA relacionados apuntan al destino correcto.

• El recurso sigue disponible en el proveedor.

• Probé realmente la reproducción.

Checklist general

• Elegí el componente correcto.

• No incrusté contenido solamente por estética.

• Utilicé Navigator.

• Los IDs personalizados son únicos.

• Las Classes compartidas tienen sentido.

• Linked styles tiene el alcance esperado.

• No apliqué CSS global sobre iframe.

• No apliqué CSS global sobre audio.

• No apliqué CSS global peligroso sobre video.

• No utilicé Width rígidos innecesarios.

• No utilicé Position absolute para maquetar.

• No utilicé overflow-x:hidden para ocultar problemas.

• No agregué JavaScript innecesario.

• No coloqué secretos en código público.

• Revisé privacidad y dependencia de terceros.

• Revisé rendimiento.

• Guardé los cambios.

• Utilicé Ver página.

• Probé realmente la interacción.

En resumen

Los tres componentes cumplen funciones diferentes:

AUDIO
→ contenido sonoro

IFRAME
→ recurso externo genérico incrustado

EMBED VIDEO
→ contenido de video

La primera regla es:

utiliza el componente más específico disponible para la tarea.

Si necesitas video:

Embed Video

puede ser preferible a construir manualmente un Iframe.

Si necesitas un recurso externo para el cual no existe un componente específico:

Iframe

puede ser apropiado,

si el proveedor permite la incrustación.

Recuerda también

Un Iframe no copia el contenido externo dentro de Waclis.

Lo muestra desde otro servicio.

Por eso:

PROVEEDOR FUNCIONA
→ contenido puede mostrarse

pero:

PROVEEDOR ELIMINA / BLOQUEA EL RECURSO
→ el bloque puede dejar de funcionar

En video

mantén la proporción correcta.

Por ejemplo:

16:9

para muchos videos horizontales,

pero:

9:16

para video vertical.

No fuerces un formato sobre otro.

Para Iframe

evita:

Width fijo de 900 px

si el sitio debe funcionar en celular.

Y evita reglas globales como:

iframe {
    width: 100%;
    height: 600px;
}

porque puedes modificar simultáneamente:

• video;

• mapa;

• calendario;

• documento;

• formulario externo.

Utiliza Classes y scope.

En Audio

no obligues al visitante a escuchar contenido inesperadamente.

En Video

no dependas de autoplay para comunicar un mensaje importante.

En Iframe

no asumas que puedes controlar el CSS interno de una página de terceros.

Y en los tres casos

“se ve correctamente dentro del Editor” no es la prueba final.

Debes:

GUARDAR CAMBIOS
↓
VER PÁGINA
↓
REPRODUCIR / INTERACTUAR
↓
COMPROBAR DESKTOP
↓
COMPROBAR CELULAR

Un contenido multimedia correctamente implementado debe:

• aportar información;

• adaptarse;

• funcionar;

• no generar interacciones falsas;

• no depender innecesariamente de recursos externos;

• mantenerse actualizado.