---
title: "Video Center - Integrar un vídeo en su sitio web"
description: "Copie el código embed de su vídeo desde Video Center e intégrelo en menos de 5 minutos mediante iframe, editor CMS o bloque HTML de WordPress."
url: https://docs.ovhcloud.com/es/guides/web-cloud/video-center/website-integration
lang: es
lastUpdated: 2026-05-27
---
# Video Center - Integrar un vídeo en su sitio web

## Objetivo

**OVHcloud Video Center** es una plataforma de alojamiento de vídeo que genera un código de integración (iframe) que le permite difundir sus vídeos en cualquier sitio web.

**Gracias a esta guía, su vídeo alojado en Video Center será visible en su sitio web y se adaptará tanto a móviles como a ordenadores.**

Se abordan 3 métodos en función de su entorno:

- **Código embed (iframe)**: utilícelo si dispone de acceso al código HTML de su sitio web.
- **Editor CMS (Content Management System)**: adecuado para Wix, Squarespace, Webflow, Joomla y otros CMS habituales.
- **WordPress sin plugin**: a través del bloque HTML nativo del editor Gutenberg.

**Duración estimada: menos de 5 minutos.**

## Requisitos

- Disponer de un [Video Center de OVHcloud](https://www.ovhcloud.com/es/video-center/) activo.
- Tener acceso a la edición de su sitio web (back-office, editor de tema o ficheros HTML).


***

### Acceso al área de cliente de OVHcloud

- **Enlace directo:** <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink>
- **Para acceder a sus servicios:** <code className="action">Web Cloud</code> > <code className="action">Video Center</code>

***


## Procedimiento

### Recuperar el código embed de su vídeo

Sea cual sea el método elegido, empiece copiando el código embed desde Video Center.

Video Center genera automáticamente el código embed de cada vídeo desde su página de detalles. Haga clic en las pestañas siguientes para mostrar sucesivamente cada una de las **3** etapas.


**Etapa 1**

Acceda a la página <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink> de su área de cliente de OVHcloud.
![Página Video Center con la lista de los vídeos alojados en la cuenta](/images/guides/web-cloud/video-center/website-integration/video-center-selection-plan.png)Seleccione su oferta en la lista.


**Etapa 2**

En la página que se muestra, haga clic en <code className="action">Acceder al Video Center</code>.
![Botón Acceder al Video Center en la página de la oferta](/images/guides/web-cloud/video-center/website-integration/access-video-center.png)

**Etapa 3**

Haga clic en el vídeo que desee integrar para abrir su página de detalles.
![Botón Compartir / Código de integración mostrando el código iframe de un vídeo en Video Center](/images/guides/web-cloud/video-center/website-integration/integrate-video.png)Haga clic en <code className="action">Compartir</code> o <code className="action">Código de integración</code> y, a continuación, copie el código mostrado.


El código tiene este aspecto:

```html
<iframe
  src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen>
</iframe>
```

:::info
Conserve este código a mano: lo utilizará para los 3 métodos descritos a continuación.
:::

### Integrar el vídeo en su sitio web

**Elija el método que se corresponda con su entorno.**


Método 1 — Código embed (iframe) en HTML puro

Utilice este método si dispone de acceso directo al código HTML de su página.
- **Abrir el fichero HTML de su página**: en su editor de código (Visual Studio Code, Dreamweaver, etc.), abra la página en la que desee mostrar el vídeo.
- **Posicionar el cursor**: colóquelo en el lugar deseado para el vídeo.
- **Pegar el código embed**: pegue el código copiado desde Video Center.
- **Guardar y publicar**: guarde el fichero y actualícelo en su servidor (**FTP**: **F**ile **T**ransfer **P**rotocol, despliegue, etc.).
Ejemplo de resultado en su fichero HTML:
```html
<section class="ma-section-video">
  <h2>Ma présentation</h2>

  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
  </iframe>
</section>
```


Método 2 — Editor CMS (Wix, Squarespace, Webflow, Joomla…)

La mayoría de los CMS ofrecen un **bloque HTML personalizado** para insertar código de terceros en la página.
- **Abrir el editor de página**: acceda a la edición de la página en la que desee mostrar el vídeo.
- **Añadir un bloque HTML**: en función de su CMS, utilice el bloque indicado a continuación.
- **Pegar el código embed**: en el campo del bloque HTML, pegue el código iframe copiado desde Video Center.
- **Validar y publicar**: confirme la inserción y publique la página.
Bloque que debe utilizarse según el CMS:
- **Wix**: **App Wix** > **Código HTML**.
- **Squarespace**: **Bloque** > **Código**.
- **Webflow**: **Componente** > **Embed**.
- **Joomla**: **Editor** > desactive el filtro HTML > pegue el código.
- **PrestaShop**: **Módulo** > **HTML personalizado**.
:::info
Si su CMS filtra los iframes por motivos de seguridad, busque en sus parámetros la opción **"Permitir código HTML sin formato"** o **"Desactivar el filtro de contenido"**.
:::


Método 3 — WordPress sin plugin (bloque HTML)

WordPress integra de forma nativa un bloque **HTML personalizado** en el editor Gutenberg. No es necesario ningún plugin.
- **Abrir la página o la entrada**: en el panel de WordPress, abra la página o la entrada en modo edición.
- **Añadir un bloque HTML personalizado**: haga clic en <code className="action">+</code> para añadir un bloque y, a continuación, busque y seleccione **HTML personalizado**.
- **Pegar el código embed**: en el bloque HTML, pegue el código iframe copiado desde Video Center.
- **Previsualizar**: haga clic en <code className="action">Vista previa</code> para comprobar el resultado antes de publicar.
- **Publicar**: haga clic en <code className="action">Actualizar</code> o en <code className="action">Publicar</code>.
:::info
Si utiliza el antiguo editor de WordPress (TinyMCE / Clásico), cambie al modo **Texto** (no Visual) antes de pegar el código y, después, vuelva al modo Visual para comprobar el resultado.
:::

### Personalizar el reproductor de vídeo integrado


¿Cómo modificar el tamaño del vídeo?

Ajuste los atributos `width` y `height` en el código iframe:
```html
<!-- Taille fixe standard (16:9) -->
<iframe src="..." width="640" height="360" ...></iframe>

<!-- Taille plus grande -->
<iframe src="..." width="1280" height="720" ...></iframe>

<!-- Largeur 100% du conteneur -->
<iframe src="..." width="100%" height="400" ...></iframe>
```


¿Cómo hacer que el vídeo sea adaptable en móviles?

Envuelva el iframe en un contenedor CSS para que se muestre de forma fluida en todas las pantallas:
```html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>
```
:::info
La relación `padding-bottom: 56.25%` corresponde al formato **16:9** (el más habitual). Para un formato 4:3, utilice `75%`.
:::


¿Cómo desactivar la pantalla completa?

Elimine el atributo `allowfullscreen` si desea impedir el modo pantalla completa:
```html
<iframe src="..." width="640" height="360" frameborder="0"></iframe>
```

### Comprobar la integración de su vídeo

Antes de dar por finalizada la integración, compruebe los siguientes puntos:

**En ordenador:**

- El vídeo se muestra correctamente en la página.
- El reproductor se carga sin mensaje de error.
- La reproducción se inicia al hacer clic en Play.
- La pantalla completa funciona (si está activada).

**En móvil:**

- El vídeo se adapta al ancho de la pantalla (responsive).
- La reproducción funciona en iOS (Safari) y Android (Chrome).
- El vídeo no queda cortado por los bordes de la pantalla.

:::info
Pruebe en un dispositivo real en lugar de hacerlo mediante el modo de simulación de su navegador: el comportamiento puede variar en iOS.
:::

## Problemas frecuentes


¿Por qué no se muestra mi vídeo?

En función de la causa:
- **La URL embed es incorrecta**: vuelva a Video Center y copie de nuevo el código embed.
- **El vídeo aún se está procesando**: espere a que finalice la codificación en Video Center antes de integrarlo.
- **El CMS filtra los iframes**: active la autorización de los iframes en sus parámetros.
- **El sitio está en HTTPS pero la URL embed está en HTTP**: compruebe que la URL del iframe empieza por `https://`.


¿Por qué no funciona el sonido?

Algunos navegadores bloquean la reproducción automática con sonido. La reproducción manual (haciendo clic en Play) funciona con normalidad.


¿Por qué el vídeo está mal dimensionado o se sale del contenedor?

Utilice la técnica responsive descrita en el apartado **Personalizar el reproductor de vídeo integrado** más arriba con el contenedor CSS relativo.


¿Cómo resolver un mensaje "Contenido bloqueado" en WordPress?

Acceda a <code className="action">Ajustes</code> > <code className="action">Lectura</code> en WordPress y compruebe que los iframes externos no están bloqueados. Algunos plugins de seguridad (Wordfence, iThemes Security) pueden filtrar los iframes.
:::warning
Nunca desactive por completo los filtros de seguridad de su CMS. Añada únicamente el dominio `streaming.media.ovhcloud.com` a la lista de fuentes autorizadas si esta opción está disponible.
:::

## Más información

[Gestionar sus vídeos en OVHcloud Video Center](/es/guides/web-cloud/video-center/manage-videos.md)

Para servicios especializados (posicionamiento, desarrollo, etc.), contacte con los [partners de OVHcloud](https://partner.ovhcloud.com/es-es/directory/).

Interactúe con nuestra [comunidad de usuarios](https://community.ovhcloud.com/).