Generador de código responsive para insertar contenido
Generador de código para insertar contenido
Generador de código responsive para insertar contenido (YouTube, Vimeo, Maps, Calendly) | We.Inc
Pega un enlace de YouTube, Vimeo, Google Maps, Calendly, Spotify, Loom o Google Forms y obtén código iframe adaptable, con carga diferida, título accesible, vista previa y notas de privacidad por proveedor.
Pega un enlace de un proveedor compatible, elige la relación de aspecto y añade un título al contenido insertado. Obtendrás código iframe que se adapta a cualquier ancho de pantalla, solo carga cuando el visitante se acerca al desplazarse y tiene un título para lectores de pantalla. La vista previa muestra el resultado y una nota de cada proveedor explica qué podría rastrear y si existe una opción que proteja mejor la privacidad. Todo funciona en tu navegador. No enviamos a We.Inc ni a nadie más lo que escribas o subas.
Pega un enlace: un video de YouTube o Vimeo, un enlace para insertar de Google Maps, una página de reservas de Calendly, una canción o lista de Spotify, un video de Loom o un formulario de Google.
La herramienta detecta el proveedor y reescribe el enlace como la dirección oficial para insertar contenido. Rechaza los enlaces desconocidos en vez de adivinar.
Elige la relación de aspecto (16:9 para video, 4:3, 1:1 o una altura fija para páginas de reservas y formularios) y escribe un título descriptivo.
Elige cómo cargarlo. La carga diferida está activada por defecto para que el contenido no ralentice la primera vista de la página.
Comprueba la vista previa y copia el HTML. La nota del proveedor indica qué mencionar en tu aviso de privacidad o cookies.
Pon a cada iframe un título que describa su contenido, como «Mapa de nuestra tienda en King Street». Los lectores de pantalla lo anunciarán.
Usa youtube-nocookie.com para videos de YouTube. Evita que YouTube instale cookies hasta que el visitante pulse reproducir.
Coloca los elementos pesados debajo de la primera pantalla o cárgalos de forma diferida; cada uno descarga una página completa de otro sitio.
Los widgets de reservas, chat y formularios pertenecen al proveedor, no a tu sitio web. Se aplican sus condiciones y prácticas de tratamiento de datos.
Para Google Maps, selecciona Compartir, luego Insertar un mapa y copia la dirección que aparece en src. No se puede insertar un enlace normal de Maps.
Preguntas frecuentes
¿Cómo hago que un iframe sea responsive?
Envuélvelo en un contenedor con aspect-ratio (por ejemplo, 16 / 9) y width: 100%, y haz que el iframe ocupe todo el contenedor. Los sitios antiguos usaban un truco con padding-top; aspect-ratio funciona en todos los navegadores actuales. Esta herramienta genera la versión moderna.
¿Qué proveedores son compatibles?
YouTube (incluidos Shorts y enlaces youtu.be), Vimeo, enlaces insertables de Google Maps, Calendly, Spotify, Loom y Google Forms. Cada uno tiene una dirección documentada para insertar contenido. Rechazamos otros enlaces para no generar código que no funcione.
¿La carga diferida perjudica el contenido insertado?
No. loading="lazy" indica al navegador que cargue el iframe cuando esté cerca de la parte visible de la página. Si el visitante se desplaza hasta él, se carga normalmente.
¿We.Inc ofrece reservas o chat?
No. Calendly y herramientas similares son servicios independientes que contratas con sus proveedores. Esta herramienta solo genera el código para mostrar su widget en tu página.
¿Por qué no funciona mi enlace de Google Maps?
Los enlaces normales de maps.google.com y goo.gl bloquean la inserción. Abre el lugar en Google Maps, elige Compartir, luego Insertar un mapa y pega la dirección de la parte src del código que se muestra.
El costo de cada elemento insertado para tus visitantes
Un elemento insertado es una ventana pequeña a la página de otra empresa. Carga sus scripts, puede instalar sus cookies y añade peso a tu página. A menudo merece la pena, pero debe ser una decisión consciente: carga de forma diferida los elementos que estén debajo de la primera pantalla, usa modos con más privacidad cuando existan y menciona las inserciones de terceros en tu aviso de privacidad.
Elementos insertados accesibles
Los lectores de pantalla anuncian el iframe mediante su título. Si no tiene uno, los visitantes oyen «marco» y nada más. Un título claro, un enlace de texto al mismo contenido debajo del elemento y subtítulos en los videos hacen que el contenido insertado sea accesible para todos.