Video Center - Integrare un video sul tuo sito Web

Obiettivo

OVHcloud Video Center è una piattaforma di hosting video che genera un codice di integrazione (iframe) che permette di diffondere i tuoi video su qualsiasi sito Web.

Grazie a questa guida, il tuo video ospitato su Video Center sarà visibile sul tuo sito Web, responsive su mobile e computer.

Sono trattati 3 metodi a seconda del tuo ambiente:

  • Codice embed (iframe): da utilizzare se hai accesso al codice HTML del tuo sito Web.
  • Editor CMS (Content Management System): adatto a Wix, Squarespace, Webflow, Joomla e altri CMS comuni.
  • WordPress senza plugin: tramite il blocco HTML nativo dell'editor Gutenberg.

Durata stimata: meno di 5 minuti.

Prerequisiti

  • Disporre di un Video Center OVHcloud attivo.
  • Avere accesso alla modifica del tuo sito Web (back-office, editor di temi o file HTML).

Accesso allo Spazio Cliente OVHcloud

  • Link diretto:
  • Per accedere ai tuoi servizi: Web Cloud > Video Center

Procedura

Recuperare il codice embed del tuo video

Qualunque sia il metodo scelto, inizia copiando il codice embed da Video Center.

Il codice embed è generato automaticamente da Video Center per ogni video, dalla sua pagina di dettagli. Clicca sui tab sottostanti per visualizzare ognuno dei 3 passaggi.

Passaggio 1
Passaggio 2
Passaggio 3

Accedi alla pagina del tuo Spazio Cliente OVHcloud.

Pagina Video Center che elenca i video ospitati sull'account

Seleziona la tua offerta dall'elenco.

Il codice è simile a questo:

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

Conserva questo codice a portata di mano: ti servirà per i 3 metodi descritti di seguito.

Integrare il video sul tuo sito Web

Scegli il metodo che corrisponde al tuo ambiente.

Metodo 1 — Codice embed (iframe) in HTML puro

Utilizza questo metodo se hai un accesso diretto al codice HTML della tua pagina.

  • Aprire il file HTML della tua pagina: nel tuo editor di codice (Visual Studio Code, Dreamweaver, ecc.), apri la pagina in cui vuoi visualizzare il video.
  • Posizionare il cursore: posizionalo nel punto desiderato per il video.
  • Incollare il codice embed: incolla il codice copiato da Video Center.
  • Salvare e pubblicare: salva il tuo file e aggiorna il tuo server (FTP: File Transfer Protocol, deploy, ecc.).

Esempio di risultato nel tuo file 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>
Metodo 2 — Editor CMS (Wix, Squarespace, Webflow, Joomla…)

La maggior parte dei CMS offre un blocco HTML personalizzato per inserire codice di terze parti nella pagina.

  • Aprire l'editor di pagina: accedi alla modifica della pagina in cui vuoi visualizzare il video.
  • Aggiungere un blocco HTML: a seconda del tuo CMS, utilizza il blocco indicato di seguito.
  • Incollare il codice embed: nel campo del blocco HTML, incolla il codice iframe copiato da Video Center.
  • Confermare e pubblicare: conferma l'inserimento e pubblica la pagina.

Blocco da utilizzare a seconda del CMS:

  • Wix: App Wix > Codice HTML.
  • Squarespace: Block > Code.
  • Webflow: Element > Embed.
  • Joomla: Editor > disattiva il filtro HTML > incolla il codice.
  • PrestaShop: Modulo > HTML personalizzato.
Info

Se il tuo CMS filtra gli iframe per motivi di sicurezza, cerca nelle sue impostazioni l'opzione "Consenti HTML grezzo" o "Disattiva filtro contenuti".

Metodo 3 — WordPress senza plugin (blocco HTML)

WordPress integra nativamente un blocco HTML personalizzato nell'editor Gutenberg. Non è necessario alcun plugin.

  • Aprire la pagina o l'articolo: nella tua dashboard WordPress, apri la pagina o l'articolo in modifica.
  • Aggiungere un blocco HTML personalizzato: clicca su + per aggiungere un blocco, quindi cerca e seleziona HTML personalizzato.
  • Incollare il codice embed: nel blocco HTML, incolla il codice iframe copiato da Video Center.
  • Visualizzare l'anteprima: clicca su Anteprima per verificare il rendering prima della pubblicazione.
  • Pubblicare: clicca su Aggiorna o Pubblica.
Info

Se utilizzi il vecchio editor WordPress (TinyMCE / Classico), passa alla modalità Testo (e non Visuale) prima di incollare il codice, quindi torna alla modalità Visuale per verificare il rendering.

Personalizzare il lettore video integrato

Come modificare le dimensioni del video?

Regola gli attributi width e height nel codice 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>
Come rendere il video responsive su mobile?

Avvolgi l'iframe in un contenitore CSS per un rendering fluido su tutti gli schermi:

<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

Il rapporto padding-bottom: 56.25% corrisponde al formato 16:9 (il più comune). Per un formato 4:3, utilizza 75%.

Come disattivare la modalità a schermo intero?

Rimuovi l'attributo allowfullscreen se vuoi impedire la modalità a schermo intero:

<iframe src="..." width="640" height="360" frameborder="0"></iframe>

Verificare l'integrazione del video

Prima di considerare l'integrazione completata, verifica i seguenti punti:

Su computer:

  • Il video viene visualizzato correttamente sulla pagina.
  • Il lettore si carica senza messaggi di errore.
  • La riproduzione si avvia cliccando su Play.
  • La modalità a schermo intero funziona (se attivata).

Su mobile:

  • Il video si adatta alla larghezza dello schermo (responsive).
  • La riproduzione funziona su iOS (Safari) e Android (Chrome).
  • Il video non viene tagliato dai bordi dello schermo.
Info

Esegui il test su un dispositivo reale piuttosto che tramite la modalità di simulazione del tuo browser: il comportamento può differire su iOS.

Problemi frequenti

Perché il mio video non viene visualizzato?

A seconda della causa:

  • L'URL embed è errato: torna su Video Center e ricopia il codice embed.
  • Il video è ancora in fase di elaborazione: attendi la fine della codifica su Video Center prima di integrarlo.
  • Il CMS filtra gli iframe: attiva l'autorizzazione degli iframe nelle sue impostazioni.
  • Il sito è in HTTPS ma l'URL embed è in HTTP: verifica che l'URL nell'iframe inizi con https://.
Perché l'audio non funziona?

Alcuni browser bloccano la riproduzione automatica con l'audio. La riproduzione manuale (clic su Play) funziona normalmente.

Perché il video è dimensionato male o straborda?

Utilizza la tecnica responsive descritta nella sezione Personalizzare il lettore video integrato sopra con il contenitore CSS relativo.

Come risolvere un messaggio "Contenuto bloccato" in WordPress?

Accedi a Impostazioni > Lettura in WordPress e verifica che gli iframe esterni non siano bloccati. Alcuni plugin di sicurezza (Wordfence, iThemes Security) possono filtrare gli iframe.

Warning

Non disattivare mai completamente i filtri di sicurezza del tuo CMS. Aggiungi unicamente il dominio streaming.media.ovhcloud.com all'elenco delle sorgenti autorizzate se questa opzione è disponibile.

Per saperne di più

Gestire i tuoi video in OVHcloud Video Center

Per servizi specializzati (referenziamento, sviluppo, ecc.), contatta i partner OVHcloud.

Contatta la nostra Community di utenti.

Questa pagina ti è stata utile?