# Videos sugeridos

Al final del video, el reproductor mostrará una cuadrícula de hasta 12 videos (dependiendo del dispositivo), para atraer al espectador a ver más videos y prolongar las sesiones de visualización.

{% tabs %}
{% tab title="Escritorio" %}
![](/files/da82ad2e2c13629e0a3d83f2784f42a3a3281921)
{% endtab %}

{% tab title="Móvil" %}
![](/files/3fa9a7ff490d430d675ba4c0eb460e17b8b5116a)
{% endtab %}
{% endtabs %}

### Configuración

Configurar la función de Videos sugeridos es fácil. El requisito principal es proporcionar una URL que devuelva un archivo JSON. Esto puede ser un archivo .json estático o una llamada a una API que devuelva una matriz de 12 videos.

Al usar una API, se pueden utilizar parámetros de consulta para pasar datos del video actual, como etiquetas, y así crear una cuadrícula de videos sugeridos más precisa y personalizada.

```js
fluidPlayer(
  'my-video',
  {
    suggestedVideos: {
      configUrl: 'https://www.example.com/api/suggested_videos_example.json',
    }
  }
)
```

### Ejemplo JSON

La función de Videos sugeridos espera que se muestre una matriz de 12 videos en un formato de cuadrícula 4x3. Este es un ejemplo en JSON de todos los datos que puedes pasar por video. Las claves requeridas son `id`, `sources`, `thumbnail`, y `title`.

En configUrl, se puede proporcionar una nueva URL que devuelva un archivo JSON con 12 nuevos videos sugeridos.

**Nota**: Para habilitar los subtítulos en el reproductor, estos deben activarse en [`layoutControls`](/es/configuracion/subtitles.md#adding-to-fluid-player). Simplemente proporcionar subtítulos no es suficiente.

```json
[
    {
        "id": 0,
        "sources": [
            {
                "url": "https://cdn.example.com/videos/example.mp4",
                "mimeType": "video/mp4",
                "resolution": "720p",
                "hd": "true"
            },
            {
                "url": "https://cdn.example.com/videos/example.mp4",
                "mimeType": "video/mp4",
                "resolution": "480p"
            }
        ],
        "thumbnailUrl": "https://cdn.example.com/thumbnails/example.jpg",
        "title": "Un nuevo horizonte",
        "subtitles": [
            {
                "label": "English",
                "url": "https://cdn.example.com/subtitles/english.vtt",
                "lang": "en"
            },
            {
                "label": "Deutsch",
                "url": "https://cdn.example.com/deutsch.vtt",
                "lang": "de",
                "default": true
            }
        ],
        "configUrl" : "https://www.example.com/api/new_suggested_videos_example.json"
    },
    ...
]
```

### Recomendaciones de miniaturas

Fluid Player espera que las miniaturas tengan una relación de aspecto de **16x9** . Se pueden usar miniaturas en otros formatos, pero se añadirá un color de fondo para rellenar el espacio. Para obtener el mejor aspecto, se recomienda usar la relación de aspecto **16x9** .

![](/files/80b1bc666cd3cfe42bc07034e7c17f8a531c1fef)


---

# Agent Instructions: 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/configuracion/suggested-videos.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.