Imágenes y contenido incrustado

Agrega imágenes, videos e iframes

Agrega imágenes, incrusta videos e incluye contenido interactivo con iframes en tu documentación.

​

Imágenes

Añade imágenes para aportar contexto visual, ejemplos o elementos decorativos a tu documentación.

​

Sintaxis básica de imágenes

Usa la sintaxis de Markdown para agregar imágenes a tu documentación:

![Texto alternativo que describe la imagen](/path/to/image.png)

Incluye siempre un texto alternativo descriptivo para mejorar la accesibilidad y el SEO. El texto alternativo debe describir claramente lo que muestra la imagen.

Los archivos de imagen deben pesar menos de 20 MB. Para archivos más grandes, aloja las imágenes en un servicio CDN como Amazon S3 o Cloudinary.

​

Inserciones de imágenes en HTML

Para tener más control sobre la visualización de imágenes, utiliza etiquetas <img> de HTML:

<img 
  src="/images/dashboard.png" 
  alt="Interfaz principal del dashboard"
  height="300"
  className="rounded-lg"
/>

​

Desactivar la función de zoom

Para desactivar el zoom predeterminado al hacer clic en las imágenes, añade la propiedad noZoom:

<img 
  src="/images/screenshot.png" 
  alt="Texto alternativo descriptivo"
  noZoom 
  height="200"
/>

​

Enlazar imágenes

Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqueta de enlace y agrega la propiedad noZoom:

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logo de Mintlify"
    noZoom 
    height="100"
  />
</a>

Las imágenes dentro de etiquetas de enlace muestran automáticamente el cursor de puntero para indicar que se pueden hacer clic.

​

Imágenes para los modos claro y oscuro

Para mostrar imágenes diferentes según el tema claro u oscuro, usa clases de Tailwind CSS:

<!-- Imagen en modo claro -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interfaz en modo claro"
/>

<!-- Imagen en modo oscuro -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interfaz en modo oscuro"
/>

​

Videos

Mintlify admite etiquetas HTML en Markdown, lo que te da flexibilidad para crear contenido enriquecido.

Incluye siempre texto alternativo dentro de los elementos de video para los navegadores que no admiten la reproducción de video.

​

Inserciones de YouTube

Inserta videos de YouTube mediante elementos iframe:

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Reproductor de vídeo de YouTube"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

​

Videos autoalojados

Usa el elemento HTML <video> para contenido de video alojado por ti mismo:

<video
  controls
  className="w-full aspect-video rounded-xl"
  src="enlace-a-tu-video.com"
></video>

​

Reproducción automática de vídeos

Para reproducir un vídeo automáticamente, usa:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>

Al usar la sintaxis de JSX, escribe los atributos compuestos en camelCase: autoPlay, playsInline, allowFullScreen.

​

iframes

Incorpora contenido externo con elementos iframe:

<iframe 
  src="https://example.com/embed" 
  title="Contenido integrado"
  className="w-full h-96 rounded-xl"
></iframe>

​

Recursos relacionados

Referencia del componente Frame

Aprende a usar el componente Frame para mostrar imágenes.