> For the complete documentation index, see [llms.txt](https://docs.fluidplayer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fluidplayer.com/es/integracion/quick-setup.md).

# Configuración rápida

Esta página te guía paso a paso para añadir Fluid Player a tu sitio web. Hay dos formas de hacerlo:

* **La opción CDN** - pega una `<script>` etiqueta y listo. **Lo mejor para la mayoría de los sitios web**, no se necesita instalación.
* **La opción NPM** - instala el paquete mediante NPM. **Para desarrolladores que usan una herramienta de compilación como Webpack o Vite.**

**Elige la que coincida con tu configuración. Si no estás seguro, la opción CDN es la correcta.**

> ℹ️ **¿Usas WordPress?** No necesitas hacer nada de esto - **instala el** [**plugin de WordPress de Fluid Player**](/es/integracion/wordpress.md) **en su lugar.**

***

### **Opción 1: Usa la CDN (recomendado)**

Una CDN es un servicio que hospeda los archivos de Fluid Player por ti, así que no tienes que descargar ni instalar nada. Solo tienes que enlazarlos desde tu página.

#### **Paso 1: Añade un video a tu página**

Si aún no tienes uno, añade una `<video>` etiqueta donde quieras que aparezca el reproductor:

```html
<video id="example-player">
    <source src="video.mp4" type="video/mp4" />
</video>
```

El `atributo id` es lo que le indica a Fluid Player qué video mejorar; asegúrate de que esté presente.

#### **Paso 2: Carga Fluid Player e iniciarlo**

Justo antes de la etiqueta de cierre `</body>` de tu página, añade el script de Fluid Player y un inicializador de una sola línea. Tu página final debería verse así:

```html
<!-- El video, en algún lugar de tu página -->
<video id="example-player">
    <source src="video.mp4" type="video/mp4" />
</video>

<!-- Justo antes de </body> -->
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<script>
    var player = fluidPlayer('example-player');
</script>
```

Eso es todo. Actualiza la página: deberías ver que el diseño de Fluid Player reemplaza los controles de video predeterminados del navegador.

> ✅ **A partir de la v3.0.0**, la compilación de CDN incluye el CSS automáticamente. No necesitas una etiqueta `<link>` separada para las hojas de estilo.

#### **Fijar a una versión específica**

La URL de arriba (`/v3/current/`) siempre sirve la última versión v3, recomendada para la mayoría de los casos. Si prefieres fijarla a una versión específica para que nunca cambie por debajo de ti, usa:

```html
<script src="https://cdn.fluidplayer.com/3.0.0/fluidplayer.min.js"></script>
```

***

### **Opción 2: Instalar mediante NPM**

Usa este enfoque si estás creando una aplicación JavaScript con un empaquetador como Webpack, Vite o Rollup.

#### **Instala el paquete**

Ejecuta uno de estos en la raíz de tu proyecto (donde `package.json` se encuentra):

**Usando npm:**

```bash
npm install fluid-player@^3.0.0
```

**Usando yarn:**

```bash
yarn add fluid-player@^3.0.0
```

#### Importa el JavaScript

Donde quieras usar Fluid Player en tu código:

```javascript
import fluidPlayer from 'fluid-player';
```

#### Importa el CSS

La compilación de NPM no incluye CSS — necesitas importarlo por separado. Cómo hacerlo depende de tu empaquetador. Para un proyecto de Webpack que usa `~` como el `node_modules` prefijo de importación:

```css
@import "~fluid-player/src/css/fluidplayer.css";
```

Consulta la documentación de tu empaquetador si estás usando una herramienta diferente.

***

### Añadir varias opciones de calidad

Si tienes tu video en diferentes calidades (1080p, 720p, etc.), puedes dejar que los espectadores elijan. Añade varias `<source>` etiquetas: Fluid Player mostrará un selector de calidad en los controles del reproductor.

```html
<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="vid_1080p.mp4" title="1080p" type="video/mp4" />
    <source src="vid_720p.mp4" title="720p" type="video/mp4" />
    <source src="vid_480p.mp4" title="480p" type="video/mp4" />
</video>
```

El `title` es lo que aparece en el menú de calidad.

#### Marcar una fuente como HD

Para resaltar visualmente las opciones de alta definición, añade `data-fluid-hd` a la `<source>` etiqueta \<source>. La etiqueta HD usa el color principal de tu reproductor de forma predeterminada.

```html
<video id="my-video" controls style="width: 640px; height: 360px;">
    <source data-fluid-hd src="vid_1080p.mp4" title="1080p" type="video/mp4" />
    <source data-fluid-hd src="vid_720p.mp4" title="720p" type="video/mp4" />
    <source src="vid_480p.mp4" title="480p" type="video/mp4" />
</video>
```

Si prefieres usar un color diferente para la etiqueta HD, sobrescríbelo en tu propio CSS - la clase relevante es `fp_hd_source`:

```css
.fp_hd_source { color: yellow !important; }
```

***

### Personalizar el reproductor

Fluid Player acepta un objeto de configuración como segundo argumento. Aquí es donde configuras la apariencia, el comportamiento de los anuncios y casi todo lo demás.

```html
<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="vid.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
var player = fluidPlayer(
    'my-video',
    {
        layoutControls: {
            // Parámetros para personalizar el aspecto y la sensación del reproductor
        },
        vastOptions: {
            // Parámetros para personalizar cómo se muestran y se comportan los anuncios
        }
    }
);
</script>
```

Para la lista completa de opciones, consulta la [**Referencia de configuración**](/es/configuracion/layout.md).

***

### Referencia: el inicializador

```javascript
var player = fluidPlayer(target [, options]);
```

**`target`** *(obligatorio)* - indica a Fluid Player a qué video adjuntarse. Puedes pasar cualquiera de estos:

* El `atributo id` de tu `<video>` etiqueta como una cadena, p. ej. `'my-video'`, o
* el elemento de video directamente, p. ej. `document.getElementById('my-video')`

**`options`** *(opcional)* - un objeto de configuración. Consulta [**Configuración**](/es/configuracion/layout.md) para la lista completa.

> ⚠️ **Atención:** Si pasas el elemento de video directamente y aún no tiene un `atributo id` atributo `id, Fluid Player añadirá uno automáticamente. Si tu código depende de que el elemento no tenga un id, establece uno tú mismo antes de llamar a`.

***

### ¿Y ahora qué?

> 💡 **Configurar anuncios** → [**Anuncios**](/es/configuracion/advertisements.md)**.**
>
> 🎨 **Personalizar el aspecto** → [**Configuración del diseño**](/es/configuracion/layout.md)**.**
>
> 📝 **Añadir subtítulos** → [**Subtítulos**](/es/configuracion/subtitles.md)**.**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fluidplayer.com/es/integracion/quick-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.