El Editor de bloques de Waclis permite incorporar contenidos publicados en diferentes servicios externos directamente dentro de una Página web.
Dentro de:
Componentes → Incrustados
encontrarás diferentes componentes destinados a servicios específicos.
Entre los componentes que actualmente aparecen en esta categoría se encuentran:
Embed
YouTube
Vimeo
Dailymotion
Flickr
SmugMug
Scribd
Twitter
SoundCloud
Slideshare
Spotify
Imgur
Issuu
Mixcloud
TED
Animoto
Tumblr
Kickstarter
ReverbNation
Reddit
Speaker Deck
Screencast
Amazon
Someecards
TikTok
Pinterest
Wolfram
Anghami
La disponibilidad y el funcionamiento concreto de cada servicio pueden depender del proveedor externo y de las opciones que muestre el componente seleccionado.
¿Qué significa incrustar contenido?
Incrustar significa mostrar dentro de tu Página web un recurso que está publicado o alojado en otro servicio.
Por ejemplo:
TU PÁGINA WEB WACLIS
Título
[ VIDEO DE YOUTUBE ]
Descripción
El video se visualiza dentro de tu página,
pero continúa dependiendo del servicio externo.
Otro ejemplo
Escucha nuestro podcast
[ REPRODUCTOR DE SPOTIFY ]
Más información...
Otro
Mira esta publicación
[ CONTENIDO DE TIKTOK ]
El contenido no necesariamente está almacenado en Waclis
Esto es fundamental.
Conceptualmente:
WACLIS
↓
muestra
↓
CONTENIDO DEL PROVEEDOR EXTERNO
Por eso pueden ocurrir situaciones como
El recurso se elimina
↓
deja de visualizarse
O
El recurso pasa a privado
↓
el visitante ya no puede verlo
O
El proveedor cambia su sistema de incrustación
↓
el componente puede dejar de mostrarse correctamente
Waclis no controla el contenido publicado en servicios externos
Waclis te permite incorporarlo dentro del diseño.
Pero el contenido, sus permisos y la disponibilidad dependen del proveedor correspondiente.
¿Cuándo conviene utilizar contenido incrustado?
Puede ser útil cuando el recurso externo aporta valor directamente dentro de la página.
Por ejemplo:
un videotutorial;
una presentación;
un episodio de podcast;
una publicación;
una demostración;
un documento;
una campaña;
un recurso educativo.
¿Cuándo puede ser mejor utilizar simplemente un Link?
Cuando no necesitas cargar el recurso dentro de la página.
Por ejemplo:
Ver presentación en Slideshare →
puede ser suficiente si:
el contenido es secundario;
la página ya tiene muchos recursos;
la incrustación no funciona correctamente;
quieres reducir carga.
Embed vs Link
EMBED
→ contenido visible dentro de la página
LINK
→ el visitante accede al contenido en otro destino
No incrustes todo automáticamente
Una página con:
5 videos
4 publicaciones
3 reproductores
2 documentos
puede convertirse en una página:
pesada;
lenta;
visualmente saturada.
Pregunta siempre
¿Necesito que este contenido esté visible aquí o basta con ofrecer acceso mediante un Link?
¿Dónde encuentro estos componentes?
Dentro del Editor de bloques:
abre Componentes;
desplázate hasta Incrustados;
selecciona el servicio correspondiente;
agrega el componente dentro de la Section deseada.
Después utiliza Navigator
Un componente incrustado puede encontrarse dentro de una estructura como:
Section
└── Container
└── YouTube
O:
Section
└── Container
└── Grid Row
├── Column
│ ├── Heading
│ └── Paragraph
└── Column
└── Spotify
Navigator te ayuda a distinguir
Section;
Column;
Card;
componente incrustado.
Esto es importante al
mover;
clonar;
eliminar.
¿Qué componente elegir?
Primera regla:
Si existe un componente específico para el proveedor que quieres utilizar, comienza por ese componente.
Ejemplo
Para un video de YouTube:
YouTube
antes de recurrir a:
Iframe
Para Spotify
Spotify
Para Vimeo
Vimeo
Para TikTok
TikTok
¿Por qué?
Porque el componente específico está destinado a trabajar con ese tipo de contenido.
No significa que cualquier URL vaya a funcionar
El servicio puede requerir:
una URL pública;
una URL específica;
un identificador;
otro formato compatible;
según el componente y el proveedor.
Revisa siempre las opciones dentro de Contenido
No inventaremos en este tutorial un campo único para todos los servicios,
porque cada integración puede manejar el recurso de manera diferente.
URL pública vs código de inserción
Esta diferencia es muy importante.
Un proveedor puede ofrecer:
URL pública
por ejemplo:
https://servicio.com/recurso/...
Y también puede ofrecer
Código de inserción
que podría incluir HTML.
No son necesariamente lo mismo
Si el componente solicita una URL
no pegues automáticamente:
<iframe ...></iframe>
Si solicita un recurso compatible o código
no asumas que basta con copiar solamente una parte.
Lee qué espera exactamente el componente seleccionado
Regla práctica
Antes de pegar:
¿Waclis me está pidiendo una URL, un identificador o un código completo?
Utiliza preferentemente las opciones oficiales del proveedor
Cuando un servicio ofrece:
Compartir
o:
Insertar / Embed
puede proporcionar el formato adecuado.
No inventes URLs de inserción
1. ¿Cómo utilizar YouTube?
Agrega:
Componentes → Incrustados → YouTube
Puede utilizarse para
tutoriales;
demostraciones;
presentaciones;
webinars;
contenido educativo;
campañas.
Ejemplo
¿Cómo funciona Waclis?
En este video...
[ YOUTUBE ]
Más información...
Utiliza un video relevante
No incrustes:
un video relacionado solo parcialmente
si el visitante espera una explicación directa.
Título contextual
Puede ser útil:
Videotutorial: Cómo configurar...
También una descripción breve
En este video aprenderás a...
No dependas solamente del título dentro de YouTube
El contenido puede visualizarse:
antes de cargar;
con diferentes interfaces;
según disponibilidad del proveedor.
Video eliminado
Si el propietario lo elimina:
el componente dejará de mostrar el contenido esperado.
Video privado
Mismo problema.
Si publicas un video desde tu propia cuenta
comprueba que sus permisos permitan que el público objetivo lo reproduzca.
No basta con que tú puedas verlo mientras tienes iniciada sesión.
Prueba como visitante
mediante:
Ver página
Reproduce realmente el video
No te limites a comprobar la miniatura.
YouTube y responsive
Muchos videos utilizan:
16:9
Por ejemplo:
1920 × 1080
Mantén una proporción adecuada.
No fuerces:
width: 800px
height: 200px
porque deformaría el reproductor.
En mobile
el video debería adaptarse al ancho disponible.
YouTube vertical
También puede existir contenido:
9:16
No asumas que todo video debe ser 16:9.
Revisa la proporción real del recurso.
2. ¿Cómo utilizar Vimeo?
Agrega:
Componentes → Incrustados → Vimeo
El principio es similar
El video:
permanece alojado en Vimeo;
debe estar disponible;
debe permitir la reproducción correspondiente.
Puede utilizarse para
videos institucionales;
producciones;
presentaciones;
materiales educativos.
Después de configurarlo
comprueba:
miniatura;
reproducción;
sonido;
responsive;
permisos.
No asumas que una URL de Vimeo privada funcionará para todos los visitantes
Comprueba la configuración real del recurso.
YouTube vs Vimeo
No existe una obligación de utilizar uno u otro.
Si el video ya está alojado en:
YouTube
utiliza el componente YouTube.
Si está en:
Vimeo
utiliza Vimeo.
No subas el mismo recurso a otra plataforma solamente para adaptar el bloque
si no es necesario.
3. ¿Cómo utilizar Dailymotion?
El componente:
Dailymotion
permite trabajar con contenido disponible en ese servicio según la configuración admitida.
Aplica el mismo principio
recurso público;
URL o identificador válido;
prueba real;
responsive.
No necesitas aprender una metodología totalmente nueva
para cada proveedor.
La lógica general es:
SELECCIONAR PROVEEDOR
↓
CONFIGURAR RECURSO
↓
GUARDAR
↓
VER PÁGINA
↓
PROBAR
4. ¿Cómo utilizar Spotify?
Agrega:
Componentes → Incrustados → Spotify
Puede utilizarse para mostrar contenido de audio disponible en el servicio.
Dependiendo del recurso puede tratarse, por ejemplo, de contenido relacionado con:
música;
podcasts;
otros recursos admitidos.
Ejemplo
ESCUCHA EL EPISODIO
[ SPOTIFY ]
En este episodio...
Spotify vs Audio
Esta diferencia es importante.
Audio
puede utilizar un recurso sonoro directamente mediante el componente correspondiente.
Spotify
incrusta contenido alojado en Spotify.
Conceptualmente
AUDIO
→ reproductor genérico / recurso configurado
SPOTIFY
→ contenido del servicio Spotify
Si el contenido ya existe en Spotify
puede ser conveniente utilizar su componente específico.
El recurso sigue dependiendo de Spotify
Si se elimina
la incrustación puede dejar de funcionar.
Spotify y altura
Los reproductores de audio pueden necesitar una altura diferente de un video.
No apliques:
iframe {
height: 500px;
}
globalmente.
Puede convertir un pequeño reproductor en un enorme espacio vacío.
Utiliza estilos específicos.
5. ¿Cómo utilizar SoundCloud?
Agrega:
SoundCloud
cuando el contenido se encuentre en ese servicio.
Puede utilizarse para:
audio;
música;
podcast;
material sonoro.
Mismo principio
recurso válido;
contexto;
prueba;
mobile.
No utilices Spotify y SoundCloud simultáneamente para el mismo audio
sin una razón.
Puede generar redundancia.
6. ¿Cómo utilizar Mixcloud, ReverbNation o Anghami?
El Editor también muestra componentes específicos para estos servicios.
El criterio es el mismo
Utiliza el componente correspondiente solamente si:
tu contenido realmente está publicado allí;
el recurso aporta valor en la página.
No agregues varios reproductores distintos
solo para demostrar presencia en todas las plataformas.
Si quieres mostrar:
Dónde escucharnos
puede ser más liviano utilizar:
iconos;
Links;
en lugar de incrustar cinco reproductores.
7. ¿Cómo utilizar TikTok?
Agrega:
Componentes → Incrustados → TikTok
cuando quieras incorporar contenido publicado en ese servicio.
Ejemplo
MIRA EL PROCESO
[ TIKTOK ]
Antes de incrustar
pregunta:
¿Esta publicación ayuda realmente a comprender el producto, servicio o contenido?
No incorpores TikTok solamente para hacer que la página parezca más dinámica.
Contenido temporal
Las publicaciones sociales pueden:
eliminarse;
hacerse privadas;
dejar de estar disponibles.
Mantén una rutina de revisión.
Formato vertical
Muchas publicaciones pueden tener orientación vertical.
No las obligues a ocupar un bloque horizontal enorme.
Puede ser más apropiado limitar el ancho.
Desktop
Conceptualmente:
[ TIKTOK ]
con un ancho controlado.
Mobile
puede utilizar más ancho disponible.
No utilices:
margin-left: 500px;
para centrarlo.
Utiliza:
Container;
Grid;
alineación.
8. ¿Cómo utilizar Pinterest?
El componente:
permite incorporar contenido compatible del servicio.
Puede ser útil cuando la publicación o recurso visual:
forma parte del contenido;
aporta inspiración;
complementa una explicación.
No reemplaces una Gallery propia por decenas de publicaciones incrustadas
si las imágenes pueden mostrarse de forma más simple.
Cada Embed externo agrega dependencia del proveedor.
9. ¿Cómo utilizar Twitter?
Dentro de Incrustados aparece:
Puede utilizarse para mostrar contenido del servicio cuando la integración correspondiente lo permita.
Mismo principio
No conviertas una publicación social en la única evidencia de información importante.
Si el contenido es esencial:
considera también explicarlo mediante texto propio.
Una publicación puede:
eliminarse;
modificarse;
dejar de ser pública.
10. ¿Cómo utilizar Reddit?
El componente:
puede utilizarse para incorporar contenido compatible del servicio.
Antes de hacerlo
comprueba:
pertinencia;
disponibilidad;
fuente.
No incrustes una conversación externa sin aportar contexto
Por ejemplo
Opinión de la comunidad
[ REDDIT ]
Contexto...
puede ser más claro que mostrar el contenido solo.
11. ¿Cómo utilizar Flickr, SmugMug e Imgur?
Estos servicios pueden contener material visual.
Los componentes disponibles permiten trabajar con recursos compatibles según cada proveedor.
Pregunta primero
¿Necesito incrustar el recurso externo o sería mejor utilizar Image/Gallery dentro de Waclis?
Gallery propia
puede ser preferible cuando:
tienes las imágenes;
necesitas control de layout;
no necesitas interacción del proveedor.
Embed externo
puede ser útil cuando:
el contenido se mantiene en la plataforma;
su contexto allí aporta valor;
quieres utilizar la presentación específica.
No dupliques innecesariamente
Gallery
+
Flickr Embed
con exactamente las mismas imágenes.
12. ¿Cómo utilizar Scribd e Issuu?
Estos servicios suelen utilizarse para publicar documentos o publicaciones digitales.
Un componente incrustado puede ser útil para mostrar:
catálogos;
documentos;
publicaciones;
material editorial;
cuando el servicio y el recurso permiten su inserción.
Ejemplo
CATÁLOGO
[ ISSUU ]
[ ABRIR CATÁLOGO ]
Un Link alternativo puede ser útil
si el recurso es importante.
Documento incrustado vs descarga
No son lo mismo.
Incrustado:
leer dentro de la página
Descarga:
obtener el archivo
No agregues opción Download
si no existe un archivo que realmente deba descargarse.
Documentos y mobile
Un documento de muchas páginas dentro de un área pequeña puede ser incómodo en celular.
Pruébalo.
En determinados casos
puede ser mejor:
Ver documento completo →
13. ¿Cómo utilizar Slideshare y Speaker Deck?
Estos componentes pueden utilizarse para presentaciones alojadas en servicios compatibles.
Ejemplo
PRESENTACIÓN DEL PROYECTO
[ SLIDESHARE ]
O:
PRESENTACIÓN TÉCNICA
[ SPEAKER DECK ]
Comprueba
navegación de diapositivas;
tamaño;
mobile.
Una presentación de:
16:9
puede necesitar una proporción similar a un video.
Pero no fuerces una proporción si el proveedor utiliza otra.
14. ¿Cómo utilizar TED?
El componente:
TED
puede utilizarse para contenido compatible publicado en ese servicio.
Como con cualquier video externo:
contextualiza;
prueba reproducción;
revisa mobile.
No incrustes una charla completa
si solo necesitas citar o explicar una idea brevemente.
Considera si un Link es suficiente.
15. ¿Cómo utilizar Tumblr?
El Editor también incluye:
Tumblr
Utiliza este componente cuando el contenido publicado allí forme parte relevante de la página.
No utilices servicios sociales como sustituto de contenido propio cuando no aportan.
16. ¿Cómo utilizar Kickstarter?
Puede ser útil para presentar contenido relacionado con una campaña publicada en Kickstarter cuando corresponda.
Ejemplo
CONOCE EL PROYECTO
[ KICKSTARTER ]
Cuidado con campañas temporales
Una campaña puede:
finalizar;
cambiar de estado;
dejar de necesitar promoción.
Revisa posteriormente.
No mantengas durante años:
APOYA NUESTRA CAMPAÑA
si ya terminó.
17. ¿Cómo utilizar Amazon?
El componente:
Amazon
aparece dentro de la categoría Incrustados.
Utilízalo únicamente cuando el recurso compatible del proveedor tenga una función clara.
No asumas que el componente:
sincroniza productos;
actualiza precios;
actualiza stock;
automáticamente.
Un contenido incrustado no equivale a una integración comercial completa.
Esta diferencia es muy importante
EMBED
→ muestra contenido
no significa:
SINCRONIZACIÓN
→ comparte datos automáticamente
No prometas funcionalidades de e-commerce que no se hayan configurado.
18. ¿Cómo utilizar Wolfram?
El componente:
Wolfram
puede utilizarse para recursos compatibles del servicio correspondiente.
Nuevamente
la función depende del recurso proporcionado por el proveedor.
No asumas que cualquier consulta o página de Wolfram puede incrustarse automáticamente.
Prueba el recurso concreto.
19. Otros componentes disponibles
También aparecen componentes como:
Animoto;
Screencast;
Someecards;
además de los anteriores.
No necesitas memorizar el funcionamiento individual de cada uno
La metodología correcta es siempre:
IDENTIFICAR PROVEEDOR
↓
ELEGIR COMPONENTE ESPECÍFICO
↓
CONFIGURAR RECURSO COMPATIBLE
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR
¿Qué es Embed?
Además de proveedores específicos existe:
Embed
Puedes considerarlo un recurso más genérico dentro de la categoría de Incrustados.
Utilízalo cuando:
el recurso sea compatible;
no exista un componente específico más apropiado;
según las opciones que muestre el propio componente.
Pero no confundas
Embed
con:
Iframe
Ambos son recursos genéricos,
pero pueden esperar configuraciones o estructuras diferentes.
No pegues un código de Iframe en Embed sin comprobar qué acepta
Tampoco una URL de Embed dentro de Iframe automáticamente.
Revisa Contenido.
Embed vs Iframe vs Embed Video
Esta diferencia debe quedar muy clara.
Embed específico
Ejemplo:
YouTube
Spotify
TikTok
Está pensado para un proveedor concreto.
Embed Video
Video genérico dentro de Widgets
está específicamente orientado al video.
Iframe
contenedor genérico para recurso externo compatible
Regla práctica
¿Existe componente específico para el proveedor?
↓
SÍ
↓
PRUÉBALO PRIMERO
Si no existe:
¿Embed o Iframe admite el recurso?
↓
PRUEBA LA OPCIÓN APROPIADA
No utilices la solución más genérica automáticamente.
¿Y si no existe un componente específico para el servicio que necesito?
Primero comprueba si el servicio ofrece:
código de inserción;
URL Embed;
integración oficial.
Después evalúa:
Embed;
Iframe;
HTML;
según el formato proporcionado.
No inventes una integración.
Si el proveedor no permite ser incrustado
utiliza un Link.
No intentes evitar sus restricciones.
Contenido específico no confirmado en la biblioteca
No todos los servicios de Internet tienen necesariamente un componente dedicado dentro de Waclis.
Si no encuentras el proveedor en:
Componentes → Incrustados
no asumas que existe.
Utiliza:
Embed;
Iframe;
Link;
según la integración oficial disponible.
No renombres otro componente simplemente para reutilizarlo.
Navigator en contenido incrustado
Una Card puede tener:
Card
├── Heading
├── Embed
└── Paragraph
Si quieres duplicar el contenido completo:
clona:
Card
No solamente:
Embed
si necesitas mantener:
título;
descripción;
CTA.
Al clonar
revisa:
recurso externo;
título;
descripción;
URL;
ID.
Error frecuente
Card original:
Podcast A
[ Spotify A ]
Copia:
Podcast B
[ Spotify A ]
Cambiaste solamente el texto.
Siempre reproduce o abre el recurso
Eliminar un contenido incrustado
Selecciona el componente correcto.
No elimines:
Section
si solo quieres quitar:
Spotify
Recuerda
Waclis no solicita confirmación.
Si cometes un error:
Deshacer
No dejes wrappers vacíos
Por ejemplo:
Video Card
├── Heading
├── [ Embed eliminado ]
└── Paragraph
Pregunta si la Card todavía tiene sentido.
Si no:
elimina la unidad completa.
IDs
Regla habitual:
ID
→ único
Al clonar
no dejes:
id="youtube-video-1"
en dos elementos.
Classes
Pueden compartirse.
Por ejemplo:
embedded-video
en varios videos.
Linked styles
Si varios Embeds comparten una Class,
pueden compartir:
Border radius;
Width;
Margin.
Esto puede ser útil.
Pero cuidado con Height
Un:
Spotify
y un:
YouTube
no necesitan la misma altura.
No utilices una regla compartida que obligue a todos a:
height: 500px
Utiliza Classes específicas por tipo de contenido.
Ejemplo conceptual
external-embed
spotify-embed
Y:
external-embed
youtube-embed
Responsive
Todo contenido incrustado debe revisarse en:
computadora;
tablet;
celular.
Especialmente
videos;
presentaciones;
documentos;
publicaciones sociales.
El componente puede verse correctamente en desktop
y quedar:
cortado
en celular.
No utilices:
width: 800px;
si debe adaptarse.
Puede ser más apropiado:
100 % de su Container
Responsive del proveedor
Hay una segunda dificultad.
Aunque el contenedor Waclis sea responsive,
el contenido externo también debe adaptarse.
Conceptualmente
WACLIS
320 px
↓
proveedor incrustado
Si el proveedor no está preparado:
puede verse mal.
No siempre puedes corregir desde Waclis
el diseño interno de un contenido externo.
Por eso la prueba real es fundamental.
Proporciones de video
Para YouTube, Vimeo, Dailymotion y otros videos horizontales:
una proporción habitual puede ser:
16:9
Pero utiliza siempre la proporción real.
No fuerces todos los Embeds a 16:9
Spotify:
no.
Publicación vertical:
no.
Documento:
no necesariamente.
Cada tipo necesita su propia estructura.
Publicaciones sociales verticales
Puede ser mejor limitar:
max-width
en desktop.
Conceptualmente:
desktop
[ PUBLICACIÓN ]
En lugar de:
[ PUBLICACIÓN EXTENDIDA A 1900 PX ]
Utiliza Container y alineación.
No utilices grandes margin-left.
Presentaciones
Pueden beneficiarse de un ancho considerable.
Por ejemplo:
Slideshare
Speaker Deck
Revisa que:
texto de diapositivas siga siendo legible;
controles funcionen.
Documentos
Issuu o Scribd pueden necesitar más Height.
No copies la Height del video.
Audio
Spotify, SoundCloud y otros reproductores:
pueden necesitar mucho menos alto.
No existe una dimensión universal para Incrustados
CSS global peligroso
Evita:
iframe {
width: 100%;
height: 500px;
}
Puede modificar simultáneamente:
YouTube;
Spotify;
Issuu;
mapas;
calendarios;
otros recursos.
Utiliza scope.
Por ejemplo:
video-resource-section
CSS:
.video-resource-section iframe {
width: 100%;
}
Y una regla diferente para:
spotify-resource-section
No mezcles tamaños.
También evita
embed,
iframe {
display: none;
}
globalmente.
Puede eliminar muchos Widgets.
overflow
Ten cuidado con:
overflow: hidden;
Puede utilizarse para Border radius,
pero también cortar:
controles;
contenido;
sombras.
Prueba.
position
No utilices:
position: absolute;
para colocar contenido incrustado como layout habitual.
Puede generar superposiciones.
Utiliza Grid.
transform
No escales un Embed mediante:
transform: scale(.7);
solo para hacerlo entrar.
Puede reducir visualmente el contenido
sin corregir el espacio que ocupa.
Ajusta Width y estructura correctamente.
pointer-events
Evita:
pointer-events: none;
sobre reproductores interactivos.
Impediría:
reproducir;
pausar;
navegar.
No conviertas un recurso interactivo en una imagen no utilizable.
Contenido externo y privacidad
Cuando incrustas contenido de un tercero,
el navegador del visitante puede establecer comunicación con ese proveedor.
Según el servicio y su configuración
pueden cargarse:
recursos;
cookies;
sistemas de medición;
elementos externos.
Debes evaluar las políticas correspondientes de tu Página web.
Este tutorial no reemplaza asesoramiento legal
La situación puede variar según:
país;
servicio;
configuración;
tipo de recurso.
No copies una política genérica
solamente porque utilizas un Embed.
Contenido externo y rendimiento
Cada Embed puede añadir recursos.
Por eso evita:
20 publicaciones sociales
en una misma página
si solo necesitas destacar:
3
Selecciona.
Calidad es más importante que cantidad.
Página con muchos videos
Por ejemplo:
Video 1
Video 2
Video 3
Video 4
Video 5
Video 6
Puede ser mejor
Video destacado
+
Cards con Links
Página con muchos podcasts
Mismo principio.
No conviertas tu Página web en una copia completa de otra plataforma
Utiliza las incrustaciones para complementar el contenido propio.
Contenido incrustado y disponibilidad
Debes revisar periódicamente:
videos;
posts;
documentos;
podcasts;
presentaciones.
Especialmente si pertenecen a otras personas.
Un recurso externo puede desaparecer sin que modifiques Waclis.
Página con recurso eliminado
Puede mostrar:
Contenido no disponible
Retíralo o reemplázalo.
No dejes componentes rotos.
Contenido incrustado de terceros
Si el contenido no es tuyo:
asegúrate de utilizarlo de manera apropiada y mediante las opciones proporcionadas por el servicio.
No copies el archivo de otra persona
cuando la intención es simplemente incrustar su contenido publicado.
Los derechos y condiciones de uso continúan correspondiendo al proveedor y propietario del recurso.
No asumas que “si puedo incrustarlo, puedo reutilizarlo de cualquier manera”.
Contenido crítico
No hagas que la única explicación de un servicio sea:
[ VIDEO EXTERNO ]
Puede ser mejor:
Heading
Explicación breve
[ VIDEO ]
Resumen / CTA
De esa forma
la página continúa siendo comprensible si el recurso externo no carga.
Social proof
Si incrustas una publicación para demostrar:
opinión;
caso;
comentario;
no dependas de ella indefinidamente.
El autor podría eliminarla.
Para testimonios propios
puede ser más apropiado utilizar:
Testimonios
cuando cuentas con el contenido y autorización correspondiente.
Embed social vs Testimonio
PUBLICACIÓN EXTERNA
→ depende de plataforma
Testimonio en Waclis
CONTENIDO EDITORIAL PROPIO
→ se administra directamente
Elige según el caso.
Contenido incrustado vs Gallery
Para una colección de fotos propia:
Gallery puede ser más controlable.
Para una publicación específica en Flickr:
el componente Flickr puede tener sentido.
No utilices una plataforma externa cuando no necesitas su contexto.
Contenido incrustado vs Portafolio
Para proyectos propios:
Portafolio suele ser más completo.
Puedes complementar un proyecto con:
video incrustado
pero no reemplazar todo el caso con una publicación externa sin contexto.
Contenido incrustado dentro de Tabs
Puede funcionar:
Tabs
└── Panel Video
└── YouTube
Pero prueba:
abrir Tab;
reproducir;
cambiar de Tab;
volver;
comprobar comportamiento.
No asumas.
Dentro de Accordeon
Mismo principio.
Puede ser:
Ver video +
Pero si el video es importante
quizá debería estar visible directamente.
Evita demasiadas capas de interacción.
Dentro de Carousel
Especial cuidado.
Ejemplo:
Carousel
└── Slide
└── TikTok
Puede generar conflicto entre:
arrastrar publicación;
mover Carousel.
Si no es necesario:
simplifica.
Lo mismo con
Spotify;
documentos;
presentaciones.
Una interacción dentro de otra puede ser difícil en touch.
Contenido incrustado y autoplay
No dependas de reproducción automática.
Especialmente:
audio;
video.
El visitante debería conservar control.
No intentes iniciar varios reproductores simultáneamente.
Puede ser extremadamente molesto.
Si un proveedor reproduce automáticamente
evalúa si esa incrustación sigue siendo apropiada.
Contexto antes del Embed
Puede ser útil:
Mira el caso completo
Después:
[ VIDEO ]
O:
Escucha el episodio
Después:
[ SPOTIFY ]
Esto ayuda al visitante a comprender la acción.
Texto después del Embed
También puede ofrecer:
resumen;
CTA;
recurso relacionado.
No termines una página abruptamente después del reproductor
si el usuario necesita un siguiente paso.
Ejemplo
[ VIDEO ]
¿Quieres implementar esta función?
[ CONTACTAR ]
Clonar una sección con Embed
Este es un punto especialmente importante.
Original:
Heading:
Video 1
YouTube:
Recurso 1
CTA:
Más información 1
Copia:
Heading:
Video 2
YouTube:
Recurso 1
CTA:
Más información 1
Está mal.
Debes revisar toda la unidad
Checklist al clonar
Título
Descripción
Proveedor
Recurso
CTA
URL
ID
No solamente el texto más visible.
¿Qué hacer si un Embed no carga?
Primero comprueba:
¿el recurso sigue existiendo?
¿es público?
¿la URL es correcta?
¿el proveedor permite incrustarlo?
¿utilizaste el componente correcto?
¿funciona mediante Ver página?
No cambies CSS antes de comprobar el recurso.
Un error de permisos no se resuelve con CSS.
¿Qué hacer si funciona cuando estoy logueado pero no para otros?
El contenido puede tener restricciones.
Prueba:
ventana privada;
otro navegador;
cuando necesites verificar acceso público.
No asumas que tu sesión representa al visitante.
¿Qué hacer si el recurso muestra “No disponible”?
Comprueba directamente el contenido en el proveedor.
Si fue eliminado:
reemplázalo.
¿Qué hacer si el proveedor cambió el enlace?
Actualiza el recurso.
¿Qué hacer si ya no permite Embed?
Utiliza:
integración oficial actual;
Link;
según corresponda.
No intentes evitar las restricciones del proveedor.
¿Qué hacer si el Embed aparece demasiado ancho?
Revisa:
Container;
Grid Column;
Width.
No utilices Transform.
¿Qué hacer si es demasiado estrecho?
Puede estar dentro de:
Column 3
cuando necesita:
Column 8
o:
Column 12
Revisa la estructura antes de CSS.
¿Qué hacer si un video se deforma?
Revisa proporción.
¿Qué hacer si Spotify tiene enorme espacio vacío?
Probablemente una Height general demasiado grande.
Busca reglas globales sobre:
iframe
¿Qué hacer si Issuu queda demasiado bajo?
Puede necesitar una Height mayor.
No copies la altura de Spotify.
¿Qué hacer si TikTok queda gigante en desktop?
Limita el ancho mediante Container o Class localizada.
No lo deformes horizontalmente.
¿Qué hacer si Pinterest queda demasiado pequeño en mobile?
Revisa el ancho del Container.
¿Qué hacer si una presentación no permite leer las diapositivas?
Puede necesitar mayor ancho o una alternativa:
Abrir presentación
¿Qué hacer si el contenido externo tiene su propio scroll?
Prueba la experiencia.
Si el doble scroll resulta incómodo:
considera un Link externo.
¿Qué hacer si un video carga lentamente?
Puede depender del proveedor.
Reduce la cantidad de reproductores simultáneos.
No puedes controlar completamente el rendimiento del servicio externo.
¿Qué hacer si tengo 12 videos?
Puedes mostrar:
1 video principal
y:
11 Cards con Links
O dividirlos en diferentes páginas.
¿Qué hacer si quiero mostrar mi canal completo?
No asumas que el componente de un video puede convertir automáticamente la página en un feed dinámico.
Si necesitas un feed o listado automático:
eso sería otra funcionalidad.
No lo prometas desde un simple Embed.
¿Qué hacer si quiero que se actualice automáticamente cuando publico contenido nuevo?
Un Embed individual normalmente representa:
un recurso concreto
No asumas:
sincronización automática de nuevas publicaciones
Si necesitas automatización:
debe existir una funcionalidad específica.
¿Qué hacer si quiero incrustar Instagram?
En la lista de componentes que tenemos identificada dentro de Incrustados no hemos confirmado un componente específico denominado Instagram.
Por eso
no deberías buscarlo suponiendo que existe.
Si necesitas utilizar contenido de un servicio para el que no encuentras un componente dedicado:
evalúa:
Embed;
Iframe;
código oficial de inserción;
Link;
según las posibilidades que ofrezca ese proveedor.
No reutilices TikTok, Twitter o Pinterest para otro servicio.
¿Qué hacer si quiero agregar un proveedor no listado?
Mismo procedimiento:
comprueba si existe componente específico;
si no existe, busca la opción oficial de inserción del proveedor;
comprueba si es compatible con Embed/Iframe;
si no, utiliza Link.
No inventes código.
¿Qué hacer si el proveedor entrega JavaScript además de HTML?
Ese es un caso más avanzado.
Antes de pegar scripts externos:
comprueba:
procedencia;
necesidad;
instrucciones oficiales.
No agregues JavaScript desconocido a la Página web.
Un script externo puede:
modificar la página;
cargar recursos;
introducir dependencias.
Utiliza solamente código confiable y necesario.
No coloques secretos
Nunca insertes dentro de un Embed:
contraseña;
token privado;
clave secreta;
credencial de API.
El código de la Página web puede ser inspeccionado por visitantes.
Los Embeds públicos deben utilizar mecanismos apropiados para frontend.
HTML del elemento
Para casos avanzados puedes utilizar:
Editar código HTML <>
Puede servir para identificar:
wrapper;
Iframe;
Classes;
Width;
Height.
No necesitas HTML para cambiar:
Heading;
Margin;
Background.
Utiliza primero las herramientas visuales.
No elimines atributos desconocidos
de un Embed funcional.
Pueden controlar:
permisos;
pantalla completa;
reproducción;
seguridad;
presentación.
Si funciona:
cambia solamente lo necesario.
Code editor global
No lo utilices para reemplazar simplemente:
Video A
por:
Video B
Utiliza la configuración del componente.
JavaScript adicional
No agregues un script nuevo si:
YouTube
ya funciona.
Tampoco para:
Border radius;
Width;
centrar.
Eso se resuelve con CSS o estructura.
CSS localizado para YouTube
Ejemplo conceptual:
youtube-section
Wrapper:
youtube-wrapper
CSS:
.youtube-section .youtube-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
Y:
.youtube-section .youtube-wrapper iframe {
width: 100%;
height: 100%;
}
Solo utiliza este enfoque
si coincide con la estructura real.
CSS para contenido vertical
social-embed-section
Conceptualmente:
.social-embed-section .social-embed-wrapper {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
Esto puede ser más apropiado
que grandes Margins rígidos.
No es una regla universal
Ajusta al proveedor y recurso.
Ejemplo práctico 1: YouTube
Queremos:
VIDEOTUTORIAL
Cómo configurar tu cuenta
[ YOUTUBE ]
En este video aprenderás...
Paso 1
Agrega Heading.
Paso 2
Agrega YouTube.
Paso 3
Selecciona el componente.
Paso 4
Configura el recurso compatible.
Paso 5
Revisa el contenido.
Paso 6
Revisa desktop.
Paso 7
Revisa mobile.
Paso 8
Guardar Cambios.
Paso 9
Ver página.
Paso 10
Reproduce realmente el video.
Ejemplo práctico 2: Spotify
NUESTRO PODCAST
Episodio 12
[ SPOTIFY ]
Resumen...
Después de clonar para Episodio 13
actualiza:
título;
recurso;
resumen;
ID.
Reproduce unos segundos.
Ejemplo práctico 3: TikTok
MIRA EL RESULTADO
[ TIKTOK ]
Más información...
Limita el ancho en desktop
si el formato vertical lo requiere.
Revisa touch y scroll en celular.
Ejemplo práctico 4: Issuu
CATÁLOGO 2026
[ ISSUU ]
[ VER CATÁLOGO ]
Comprueba:
documento correcto;
navegación;
legibilidad en celular.
Ejemplo práctico 5: Slideshare
PRESENTACIÓN
[ SLIDESHARE ]
Descargar información adicional →
Si el contenido de las diapositivas queda ilegible en mobile:
considera un Link alternativo.
Ejemplo práctico 6: SoundCloud
ESCUCHA LA ENTREVISTA
[ SOUNDCLOUD ]
Resumen...
No utilices simultáneamente:
SoundCloud
+
Spotify
+
Audio
para exactamente el mismo contenido
sin una razón.
Ejemplo práctico 7: contenido externo dentro de Grid
Desktop:
[ TEXTO ][ VIDEO ]
Estructura:
Grid Row
├── Column 5
│ ├── Heading
│ └── Paragraph
└── Column 7
└── YouTube
Mobile:
TEXTO
VIDEO
Utiliza Grid.
No:
margin-left: 700px
Ejemplo práctico 8: dos contenidos
[ VIDEO A ][ VIDEO B ]
Puede funcionar en desktop.
Pero en celular:
VIDEO A
VIDEO B
Revisa carga.
Dos videos incrustados simultáneamente pueden ser considerablemente más pesados que dos Images.
No agregues más de los necesarios.
Utilizar IA para decidir entre Embed y Link
Puedes utilizar ChatGPT, Claude o Gemini.
Por ejemplo:
Tengo este recurso externo:
[describir]
Mi página tiene este objetivo:
[objetivo]
Analiza si conviene:
- incrustarlo;
- utilizar Image + Link;
- utilizar solamente Link.
Considera:
- importancia;
- mobile;
- rendimiento;
- dependencia del proveedor.
No inventes funcionalidades de Waclis.
IA para elegir componente
El recurso está alojado en:
[proveedor]
Dentro de Waclis tengo:
[lista de componentes disponibles]
Indícame qué componente debería probar primero.
Si no existe un componente específico, indícame que debo revisar Embed/Iframe o la opción oficial del proveedor.
No inventes componentes.
IA para revisar código Embed
Este proveedor me entrega este código:
[pegar]
Identifica:
- servicio;
- URL;
- iframe;
- width;
- height;
- scripts;
- atributos.
No elimines nada.
No generes cambios todavía.
IA para responsive
Tengo este Embed dentro de Waclis:
HTML:
[pegar]
CSS actual:
[pegar]
En celular desborda.
Busca:
- width fija;
- min-width;
- height;
- margin;
- position.
No utilices overflow-x:hidden como solución.
No modifiques el contenido del proveedor.
IA para detectar recursos rotos
Tengo esta lista de contenidos incrustados:
[título + proveedor + URL]
Crea una checklist para revisar manualmente:
- si sigue disponible;
- si es público;
- si corresponde al título;
- si funciona en celular.
No navegues ni inventes el estado de los recursos.
IA para revisar una página saturada
Mi página tiene:
[listar embeds]
Objetivo:
[objetivo]
Analiza cuáles deberían permanecer incrustados y cuáles podrían reemplazarse por Links o Cards.
Prioriza:
- claridad;
- rendimiento;
- contenido importante.
No elimines información esencial.
IA para CSS de video
Tengo un YouTube Embed en:
.video-help-section
Debe:
- ocupar el 100 % del Container;
- mantener 16:9;
- ser responsive;
- no afectar otros Iframes.
Waclis utiliza Bootstrap 4.
No cambies HTML.
No agregues JavaScript.
Devuélveme solamente CSS localizado.
IA para publicación vertical
Tengo un TikTok Embed dentro de:
.tiktok-section
Necesito:
- máximo 420 px en desktop;
- centrado;
- ancho disponible en mobile;
- sin margin-left rígido;
- no afectar otros Embeds.
No cambies el recurso.
No agregues JavaScript.
IA para detectar CSS global peligroso
Revisa este CSS:
[pegar]
Busca selectores que puedan afectar contenido incrustado, especialmente:
iframe
embed
video
audio
object
.youtube
.spotify
y propiedades:
width
height
overflow
position
transform
pointer-events
No modifiques el código.
Solo identifica riesgos.
IA para verificar contenido clonado
Tengo dos Cards con contenido incrustado:
Card original:
[HTML]
Card clonada:
[HTML]
Busca qué datos continúan duplicados:
- URL;
- src;
- ID;
- título;
- descripción;
- CTA.
No inventes valores nuevos.
Buenas prácticas
Recomendamos:
utilizar el componente específico cuando exista;
confirmar que el recurso sea público;
utilizar formatos oficiales;
comprobar qué espera el campo;
diferenciar URL de código HTML;
utilizar Navigator;
dar contexto al recurso;
mantener responsive;
respetar proporciones;
limitar la cantidad de Embeds;
comprobar mobile;
revisar privacidad;
mantener contenido externo actualizado;
utilizar Links alternativos cuando aporten;
no almacenar credenciales en código público;
probar mediante Ver página.
Errores frecuentes
Utilizar Iframe para todo
Prueba primero el componente específico.
Utilizar un componente del proveedor equivocado
YouTube para YouTube, Vimeo para Vimeo, etc.
Suponer que existe un componente para cualquier plataforma
Comprueba la lista real.
Pegar HTML en un campo que espera URL
Revisa la configuración.
Pegar una URL normal cuando el componente necesita otro formato
Utiliza el recurso compatible.
Inventar una URL Embed
Utiliza la opción oficial.
Creer que Waclis almacena el contenido externo
Depende del proveedor.
Creer que un Embed sincroniza información automáticamente
Mostrar no significa sincronizar.
Creer que Amazon Embed sincroniza stock o precios
No asumas una integración comercial.
Incrustar contenido privado
El visitante puede no verlo.
Probar solamente con tu propia sesión
Comprueba acceso público.
Dejar contenido eliminado
Revísalo periódicamente.
Utilizar demasiados Embeds
Puede afectar claridad y rendimiento.
Mostrar cinco plataformas para el mismo audio
Puede ser redundante.
Forzar todos los Embeds a 16:9
Cada tipo tiene proporciones distintas.
Aplicar Height global a todos los Iframes
Spotify y YouTube no necesitan la misma.
Aplicar CSS global sobre iframe
Puede afectar otros Widgets.
Posicionar contenido con Margin rígido
Utiliza Grid y alineación.
Escalar mediante Transform para hacerlo entrar
Corrige Width.
Desactivar pointer-events
Puede impedir utilizar el recurso.
Utilizar overflow-x:hidden para ocultar desbordamiento
Corrige la causa.
Clonar Card y dejar el Embed anterior
Revisa el recurso.
Clonar ID
Mantén IDs únicos.
Eliminar el componente y dejar una Card vacía
Revisa la estructura.
Agregar JavaScript desconocido
Utiliza solamente código necesario y confiable.
Colocar credenciales privadas en HTML
Nunca.
Confiar únicamente en un video para explicar información esencial
Agrega contexto textual.
Mostrar un documento imposible de leer en celular
Ofrece otra forma de acceso.
Mantener campañas externas finalizadas
Actualiza contenido temporal.
No probar la interacción real
Siempre utiliza Ver página.
Flujo recomendado
1. IDENTIFICAR EL RECURSO
↓
2. IDENTIFICAR EL PROVEEDOR
↓
3. BUSCAR COMPONENTE ESPECÍFICO
↓
4. SI NO EXISTE, EVALUAR EMBED / IFRAME / LINK
↓
5. OBTENER EL RECURSO OFICIAL
↓
6. AGREGAR EL COMPONENTE
↓
7. ABRIR NAVIGATOR
↓
8. CONFIGURAR EL RECURSO
↓
9. AGREGAR CONTEXTO
↓
10. REVISAR PROPORCIÓN / WIDTH / HEIGHT
↓
11. REVISAR DESKTOP
↓
12. REVISAR TABLET
↓
13. REVISAR CELULAR
↓
14. GUARDAR CAMBIOS
↓
15. VER PÁGINA
↓
16. REPRODUCIR / INTERACTUAR
↓
17. COMPROBAR QUE SIGA SIENDO PÚBLICO
Checklist antes de finalizar
El contenido externo aporta valor.
Identifiqué el proveedor correcto.
Utilicé el componente específico cuando existe.
No inventé un componente que Waclis no tiene.
El recurso sigue disponible.
El recurso tiene permisos adecuados.
Utilicé el formato que solicita el componente.
No confundí URL con código HTML.
Utilicé Navigator.
No quedan contenidos de ejemplo.
El título corresponde al recurso.
La descripción corresponde al recurso.
Los Links complementarios funcionan.
Los IDs son únicos.
Las Classes estructurales se conservaron.
Linked styles tiene el alcance esperado.
Desktop se visualiza correctamente.
Tablet se visualiza correctamente.
Celular se visualiza correctamente.
Los videos mantienen su proporción.
Los contenidos verticales no son exageradamente anchos.
Los documentos siguen siendo utilizables.
Los reproductores tienen una altura razonable.
No apliqué Height universal a todos los Iframes.
No utilicé Width fijo problemático.
No utilicé Margin rígido para centrar.
No utilicé Position absolute innecesariamente.
No apliqué CSS global peligroso.
No desactivé la interacción.
No agregué scripts desconocidos.
No coloqué credenciales privadas.
Revisé privacidad.
Revisé rendimiento.
No hay demasiados recursos externos en una sola página.
Guardé los cambios.
Utilicé Ver página.
Probé realmente cada Embed.
Checklist de mantenimiento
Los contenidos externos deberían revisarse periódicamente.
Los videos siguen disponibles.
Los podcasts siguen disponibles.
Las publicaciones siguen públicas.
Los documentos siguen vigentes.
Las campañas todavía corresponden.
No hay publicaciones eliminadas.
Las URLs no cambiaron.
Los recursos siguen funcionando en celular.
Los títulos de la página siguen coincidiendo con el contenido externo.
No quedan mensajes de “contenido no disponible”.
En resumen
Dentro de:
Componentes → Incrustados
Waclis incluye componentes destinados a diferentes proveedores, entre ellos:
YouTube
Vimeo
Dailymotion
Spotify
SoundCloud
TikTok
Flickr
Scribd
Issuu
Slideshare
TED
y otros
La regla principal es:
si existe un componente específico para el servicio que necesitas, comienza por ese componente.
Después
configura únicamente un recurso:
válido;
disponible;
público para el público correspondiente.
Recuerda la diferencia
COMPONENTE ESPECÍFICO
→ proveedor concreto
EMBED
→ opción más genérica
IFRAME
→ marco genérico para contenido externo compatible
EMBED VIDEO
→ componente orientado específicamente a video
No utilices la solución más genérica si existe una específica que funciona correctamente.
También recuerda
INCRUSTAR
≠
SINCRONIZAR
Mostrar un contenido de Amazon, Spotify, YouTube u otro servicio:
no significa que Waclis esté sincronizando automáticamente todos los datos del proveedor.
Un Embed individual normalmente representa
UN RECURSO
no:
UN FEED AUTOMÁTICO DE TODO EL CONTENIDO FUTURO
salvo que exista una funcionalidad específica para ello.
En responsive
no utilices una única regla:
iframe {
width: 100%;
height: 500px;
}
para todos los proveedores.
Porque:
YouTube
→ puede necesitar 16:9
Spotify
→ reproductor más bajo
TikTok
→ composición vertical
Issuu
→ documento
Cada contenido necesita su propia presentación.
Y finalmente
el contenido depende del servicio externo.
Por eso:
RECURSO EXISTE + ES PÚBLICO + PROVEEDOR PERMITE EMBED
↓
PUEDE MOSTRARSE
pero:
RECURSO ELIMINADO / PRIVADO / BLOQUEADO
↓
PUEDE DEJAR DE FUNCIONAR
La comprobación correcta es
CONFIGURAR
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
ABRIR / REPRODUCIR
↓
REVISAR DESKTOP
↓
REVISAR CELULAR
No consideres terminado un contenido incrustado solamente porque aparece un cuadro dentro del Editor.
Debes comprobar:
“¿Un visitante que no tiene acceso a mis cuentas puede ver y utilizar correctamente este recurso desde la Página web?”
Si la respuesta es sí, la incrustación está correctamente preparada.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp