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 ativo.
  • Ter acesso à edição do seu site Web (back-office, editor de temas ou ficheiros HTML).

Acesso à área de cliente OVHcloud

  • Link direto:
  • Para aceder aos seus serviços: Web Cloud > Video Center

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
Etapa 2
Etapa 3

Aceda à página da sua área de cliente OVHcloud.

Página Video Center que lista os vídeos alojados na conta

Selecione a sua oferta na lista.

O código é semelhante a este:

<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: File Transfer Protocol, implementação, etc.).

Exemplo de resultado no seu ficheiro 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 + 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 Pré-visualizar para verificar o rendering antes da publicação.
  • Publicar: clique em Atualizar ou Publicar.
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:

<!-- 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:

<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:

<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 Definições > Leitura 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

Para serviços especializados (referenciamento, desenvolvimento, etc.), contacte os parceiros OVHcloud.

Fale com a nossa comunidade de utilizadores.

Esta página foi útil?