> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-i-to-quickstart-8818.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Imágenes y contenido incrustado

> Añade imágenes, videos e iframes

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

Todos los archivos estáticos de tu repositorio de documentación se sirven automáticamente en la ruta correspondiente de tu dominio. Por ejemplo, si tienes `/images/my-logo.png` en tu repo, la imagen estará disponible en `https://docs.yoursite.com/images/my-logo.png`.

<Frame>
  <img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Fotografía de un paisaje con flores moradas en primer plano, montañas al fondo y un cielo azul con nubes dispersas." />
</Frame>

<div id="images">
  ## Imágenes
</div>

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

<div id="basic-image-syntax">
  ### Sintaxis básica de imágenes
</div>

Usa la [sintaxis de Markdown](https://www.markdownguide.org/basic-syntax/#images) para agregar imágenes a tu documentación:

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

<Tip>
  Incluye siempre texto alternativo descriptivo para mejorar la accesibilidad y el SEO. El texto alternativo debe describir con claridad lo que muestra la imagen.
</Tip>

Los archivos de imagen deben pesar menos de 20 MB. Para archivos más grandes, aloja el contenido en un servicio CDN como [Amazon S3](https://aws.amazon.com/s3) o [Cloudinary](https://cloudinary.com).

<div id="html-image-embeds">
  ### Inserciones de imágenes en HTML
</div>

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

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

<div id="disable-zoom-functionality">
  #### Desactivar la funcionalidad de zoom
</div>

Para desactivar el zoom predeterminado al hacer clic en las imágenes, agrega la propiedad `noZoom`:

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

<div id="link-images">
  #### Enlazar imágenes
</div>

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

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

<Note>
  Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden hacer clic.
</Note>

<div id="light-and-dark-mode-images">
  #### Imágenes para modos claro y oscuro
</div>

Para mostrar imágenes distintas en los temas claro y oscuro, usa clases de Tailwind CSS:

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

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

<div id="videos">
  ## Videos
</div>

Mintlify admite [etiquetas HTML en Markdown](https://www.markdownguide.org/basic-syntax/#html), lo que te da flexibilidad para crear contenido enriquecido.

<Tip>
  Incluye siempre contenido de texto de respaldo dentro de los elementos de video para los navegadores que no admiten la reproducción de video.
</Tip>

<div id="youtube-embeds">
  ### Insertar contenido de YouTube
</div>

Inserta videos de YouTube usando elementos iframe:

```html
<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>
```

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

<div id="self-hosted-videos">
  ### Videos autoalojados
</div>

Usa el elemento HTML `<video>` para contenido de vídeo autoalojado:

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

<div id="autoplay-videos">
  ### Reproducción automática de vídeos
</div>

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

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

<Note>
  Al usar la sintaxis JSX, escribe los atributos compuestos en camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
</Note>

<div id="iframes">
  ## iframes
</div>

Incorpora contenido externo con elementos iframe:

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

<div id="related-resources">
  ## Recursos relacionados
</div>

<Card title="Referencia del componente Frame" icon="frame" horizontal href="/es/components/frames">
  Aprende a usar el componente Frame para presentar imágenes.
</Card>