---
title: "Video Center - Integrare un video sul tuo sito Web"
description: "Copia il codice embed del tuo video da Video Center e integralo in meno di 5 minuti tramite iframe, editor CMS o blocco HTML WordPress."
url: https://docs.ovhcloud.com/it/guides/web-cloud/video-center/website-integration
lang: it
lastUpdated: 2026-05-27
---
# 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](https://www.ovhcloud.com/it/video-center/) attivo.
- Avere accesso alla modifica del tuo sito Web (back-office, editor di temi o file HTML).


***

### Accesso allo Spazio Cliente OVHcloud

- **Link diretto:** <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink>
- **Per accedere ai tuoi servizi:** <code className="action">Web Cloud</code> > <code className="action">Video Center</code>

***


## 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**

Accedi alla pagina <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink> del tuo Spazio Cliente OVHcloud.
![Pagina Video Center che elenca i video ospitati sull'account](/images/guides/web-cloud/video-center/website-integration/video-center-selection-plan.png)Seleziona la tua offerta dall'elenco.


**Passaggio 2**

Nella pagina visualizzata, clicca su <code className="action">Accedi al Video Center</code>.
![Pulsante Accedi al Video Center nella pagina dell'offerta](/images/guides/web-cloud/video-center/website-integration/access-video-center.png)

**Passaggio 3**

Clicca sul video che vuoi integrare per aprire la sua pagina di dettagli.
![Pulsanti Condividi / Codice di integrazione che mostrano il codice iframe di un video in Video Center](/images/guides/web-cloud/video-center/website-integration/integrate-video.png)Clicca su <code className="action">Condividi</code> o <code className="action">Codice di integrazione</code>, quindi copia il codice visualizzato.


Il codice è simile a questo:

```html
<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**: **F**ile **T**ransfer **P**rotocol, deploy, ecc.).
Esempio di risultato nel tuo file 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>
```


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 <code className="action">+</code> 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 <code className="action">Anteprima</code> per verificare il rendering prima della pubblicazione.
- **Pubblicare**: clicca su <code className="action">Aggiorna</code> o <code className="action">Pubblica</code>.
:::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:
```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>
```


Come rendere il video responsive su mobile?

Avvolgi l'iframe in un contenitore CSS per un rendering fluido su tutti gli schermi:
```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
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:
```html
<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 <code className="action">Impostazioni</code> > <code className="action">Lettura</code> 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](/it/guides/web-cloud/video-center/manage-videos.md)

Per servizi specializzati (referenziamento, sviluppo, ecc.), contatta i [partner OVHcloud](https://partner.ovhcloud.com/it/directory/).

Contatta la nostra [Community di utenti](https://community.ovhcloud.com/).