---
title: "Video Center - Integrar um vídeo no seu site Web"
description: "Copie o código embed do seu vídeo no Video Center e integre-o em menos de 5 minutos através de iframe, editor CMS ou bloco HTML WordPress."
url: https://docs.ovhcloud.com/pt/guides/web-cloud/video-center/website-integration
lang: pt
lastUpdated: 2026-05-27
---
# Video Center - Integrar um vídeo no seu site Web

## Objetivo

**OVHcloud Video Center** é uma plataforma de alojamento de vídeo que gera um código de integração (iframe) que permite difundir os seus vídeos em qualquer site Web.

**Graças a este guia, o seu vídeo alojado no Video Center fica visível no seu site Web, responsive em telemóvel e computador.**

São abordados 3 métodos consoante o seu ambiente:

- **Código embed (iframe)**: a utilizar se tiver acesso ao código HTML do seu site Web.
- **Editor CMS (Content Management System)**: adaptado a Wix, Squarespace, Webflow, Joomla e outros CMS comuns.
- **WordPress sem plugin**: através do bloco HTML nativo do editor Gutenberg.

**Duração estimada: menos de 5 minutos.**

## Requisitos

- Dispor de um [Video Center OVHcloud](https://www.ovhcloud.com/pt/video-center/) ativo.
- Ter acesso à edição do seu site Web (back-office, editor de temas ou ficheiros HTML).


***

### Acesso à área de cliente OVHcloud

- **Link direto:** <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink>
- **Para aceder aos seus serviços:** <code className="action">Web Cloud</code> > <code className="action">Video Center</code>

***


## Instruções

### Recuperar o código embed do seu vídeo

Independentemente do método escolhido, comece por copiar o código embed a partir do Video Center.

O código embed é gerado automaticamente pelo Video Center para cada vídeo, na sua página de detalhes. Clique nos separadores abaixo para visualizar cada uma das **3** etapas.


**Etapa 1**

Aceda à página <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink> da sua área de cliente OVHcloud.
![Página Video Center que lista os vídeos alojados na conta](/images/guides/web-cloud/video-center/website-integration/video-center-selection-plan.png)Selecione a sua oferta na lista.


**Etapa 2**

Na página apresentada, clique em <code className="action">Aceder ao Video Center</code>.
![Botão Aceder ao Video Center na página da oferta](/images/guides/web-cloud/video-center/website-integration/access-video-center.png)

**Etapa 3**

Clique no vídeo que pretende integrar para abrir a sua página de detalhes.
![Botões Partilhar / Código de integração que apresentam o código iframe de um vídeo no Video Center](/images/guides/web-cloud/video-center/website-integration/integrate-video.png)Clique em <code className="action">Partilhar</code> ou <code className="action">Código de integração</code>, e copie o código apresentado.


O código é semelhante a este:

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

:::info
Mantenha este código à mão: vai precisar dele para os 3 métodos descritos abaixo.
:::

### Integrar o vídeo no seu site Web

**Escolha o método que corresponde ao seu ambiente.**


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

Utilize este método se tiver acesso direto ao código HTML da sua página.
- **Abrir o ficheiro HTML da sua página**: no seu editor de código (Visual Studio Code, Dreamweaver, etc.), abra a página onde pretende apresentar o vídeo.
- **Posicionar o cursor**: coloque-o no local pretendido para o vídeo.
- **Colar o código embed**: cole o código copiado a partir do Video Center.
- **Guardar e publicar**: guarde o ficheiro e atualize o seu servidor (**FTP**: **F**ile **T**ransfer **P**rotocol, implementação, etc.).
Exemplo de resultado no seu ficheiro 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…)

A maioria dos CMS oferece um **bloco HTML personalizado** para inserir código de terceiros na página.
- **Abrir o editor de página**: aceda à edição da página onde pretende apresentar o vídeo.
- **Adicionar um bloco HTML**: consoante o seu CMS, utilize o bloco indicado abaixo.
- **Colar o código embed**: no campo do bloco HTML, cole o código iframe copiado a partir do Video Center.
- **Validar e publicar**: confirme a inserção e publique a página.
Bloco a utilizar consoante o CMS:
- **Wix**: **App Wix** > **Código HTML**.
- **Squarespace**: **Block** > **Code**.
- **Webflow**: **Element** > **Embed**.
- **Joomla**: **Editor** > desative o filtro HTML > cole o código.
- **PrestaShop**: **Módulo** > **HTML personalizado**.
:::info
Se o seu CMS filtrar os iframes por motivos de segurança, procure nas suas definições a opção **"Permitir HTML em bruto"** ou **"Desativar filtro de conteúdo"**.
:::


Método 3 — WordPress sem plugin (bloco HTML)

O WordPress integra nativamente um bloco **HTML personalizado** no editor Gutenberg. Não é necessário qualquer plugin.
- **Abrir a página ou o artigo**: no seu painel WordPress, abra a página ou o artigo em edição.
- **Adicionar um bloco HTML personalizado**: clique em <code className="action">+</code> para adicionar um bloco, depois procure e selecione **HTML personalizado**.
- **Colar o código embed**: no bloco HTML, cole o código iframe copiado a partir do Video Center.
- **Pré-visualizar**: clique em <code className="action">Pré-visualizar</code> para verificar o rendering antes da publicação.
- **Publicar**: clique em <code className="action">Atualizar</code> ou <code className="action">Publicar</code>.
:::info
Se utilizar o antigo editor WordPress (TinyMCE / Clássico), mude para o modo **Texto** (e não Visual) antes de colar o código, depois volte ao modo Visual para verificar o rendering.
:::

### Personalizar o leitor de vídeo integrado


Como modificar o tamanho do vídeo?

Ajuste os atributos `width` e `height` no 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>
```


Como tornar o vídeo responsive em telemóvel?

Envolva o iframe num contentor CSS para um rendering fluido em todos os ecrãs:
```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
O rácio `padding-bottom: 56.25%` corresponde ao formato **16:9** (o mais comum). Para um formato 4:3, utilize `75%`.
:::


Como desativar o ecrã inteiro?

Remova o atributo `allowfullscreen` se pretender impedir o ecrã inteiro:
```html
<iframe src="..." width="640" height="360" frameborder="0"></iframe>
```

### Verificar a integração do seu vídeo

Antes de considerar a integração concluída, verifique os pontos seguintes:

**Em computador:**

- O vídeo é apresentado corretamente na página.
- O leitor carrega sem mensagens de erro.
- A reprodução inicia ao clicar em Play.
- O ecrã inteiro funciona (se ativado).

**Em telemóvel:**

- O vídeo adapta-se à largura do ecrã (responsive).
- A reprodução funciona em iOS (Safari) e Android (Chrome).
- O vídeo não é cortado pelos bordos do ecrã.

:::info
Teste num dispositivo real, em vez de utilizar o modo de simulação do seu navegador — o comportamento pode diferir em iOS.
:::

## Problemas frequentes


Porque é que o meu vídeo não é apresentado?

Consoante a causa:
- **O URL embed está incorreto**: volte ao Video Center e copie novamente o código embed.
- **O vídeo ainda está em processamento**: aguarde o fim da codificação no Video Center antes de o integrar.
- **O CMS filtra os iframes**: ative a autorização de iframes nas suas definições.
- **O site está em HTTPS mas o URL embed está em HTTP**: verifique se o URL no iframe começa por `https://`.


Porque é que o som não funciona?

Alguns navegadores bloqueiam a reprodução automática com som. A reprodução manual (clique em Play) funciona normalmente.


Porque é que o vídeo está mal dimensionado ou transborda?

Utilize a técnica responsive descrita na secção **Personalizar o leitor de vídeo integrado** acima, com o contentor CSS relativo.


Como resolver uma mensagem "Conteúdo bloqueado" no WordPress?

Aceda a <code className="action">Definições</code> > <code className="action">Leitura</code> no WordPress e verifique se os iframes externos não estão bloqueados. Alguns plugins de segurança (Wordfence, iThemes Security) podem filtrar os iframes.
:::warning
Nunca desative totalmente os filtros de segurança do seu CMS. Adicione apenas o domínio `streaming.media.ovhcloud.com` à lista das origens autorizadas se essa opção estiver disponível.
:::

## Saiba mais

[Gerir os seus vídeos no OVHcloud Video Center](/pt/guides/web-cloud/video-center/manage-videos.md)

Para serviços especializados (referenciamento, desenvolvimento, etc.), contacte os [parceiros OVHcloud](https://partner.ovhcloud.com/pt/directory/).

Fale com a nossa [comunidade de utilizadores](https://community.ovhcloud.com/).