Un video responsivo WordPress HTML CSS mantiene la larghezza del contenuto e adatta automaticamente l’altezza allo schermo, senza deformare il filmato. Con un contenitore CSS basato sulla proprietà aspect-ratio è possibile usare proporzioni standard come 16:9 e 4:3 oppure formati personalizzati come 21:9 e 9:16. Il metodo funziona con video incorporati da YouTube e Vimeo, ma anche con file locali gestiti tramite l’elemento HTML video. La procedura richiede un blocco HTML personalizzato e alcune regole CSS aggiuntive.

Come preparare il contenitore del video in WordPress

Il contenitore esterno determina le proporzioni del video responsivo WordPress HTML CSS. L’iframe o l’elemento video devono occupare il 100% della larghezza e dell’altezza del contenitore, mentre overflow: hidden impedisce che il contenuto esca dai suoi bordi.

Passo 1: inserire il blocco HTML personalizzato

Nell’editor a blocchi di WordPress, aggiungi il blocco HTML personalizzato nel punto in cui vuoi mostrare il video. Per un filmato YouTube, usa l’URL di incorporamento ottenuto dal comando Condividi > Incorpora, non l’indirizzo della pagina di visualizzazione.

Un codice di base per YouTube è il seguente:

<div class="video-responsive video-16-9">
<iframe
src="https://www.youtube.com/embed/ID_VIDEO"
title="Titolo descrittivo del video"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

Sostituisci ID_VIDEO con l’identificativo reale del video. L’attributo title migliora l’accessibilità, mentre loading="lazy" ritarda il caricamento dell’iframe quando il video si trova più in basso nella pagina.

Passo 2: aggiungere il CSS responsivo

Apri Aspetto > Personalizza > CSS aggiuntivo nei temi che utilizzano il personalizzatore classico. Nei temi a blocchi, il percorso può essere Aspetto > Editor > Stili, quindi il menu con i tre puntini e la voce relativa al CSS aggiuntivo; la disponibilità dipende dal tema e dalla versione di WordPress.

Incolla queste regole:

.video-responsive {
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
}

.video-responsive iframe,
.video-responsive video {
display: block;
width: 100%;
height: 100%;
border: 0;
}

.video-16-9 {
aspect-ratio: 16 / 9;
}

La proprietà aspect-ratio: 16 / 9 mantiene il rapporto tra larghezza e altezza senza ricorrere a calcoli manuali con il padding-top. Il valore max-width: 100% evita che il contenitore superi la larghezza della colonna del tema WordPress.

Come usare proporzioni personalizzate per YouTube e Vimeo

Per cambiare il formato basta assegnare una classe CSS diversa al contenitore HTML. Il rapporto 16:9 è adatto alla maggior parte dei video panoramici, mentre 4:3 conserva un formato più tradizionale.

Aggiungi al CSS le classi corrispondenti alle proporzioni che vuoi utilizzare:

.video-4-3 {
aspect-ratio: 4 / 3;
}

.video-21-9 {
aspect-ratio: 21 / 9;
}

.video-1-1 {
aspect-ratio: 1 / 1;
}

.video-9-16 {
aspect-ratio: 9 / 16;
}

Per applicare il formato 4:3, modifica la classe del contenitore:

<div class="video-responsive video-4-3">
<iframe
src="https://player.vimeo.com/video/ID_VIDEO"
title="Titolo descrittivo del video"
loading="lazy"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen>
</iframe>
</div>

La proporzione 9:16 è indicata per filmati verticali destinati agli smartphone, ma può occupare molto spazio sulle colonne desktop. Il rapporto 21:9 crea invece un riquadro panoramico e può lasciare più spazio vuoto ai lati se il video originale usa un formato diverso.

Se il filmato incorporato presenta barre nere, il problema può dipendere dal rapporto originale del video o dalle impostazioni del servizio esterno. Il CSS adatta il contenitore, ma non modifica il formato interno del filmato.

Come incorporare un video locale con HTML e CSS

Un file MP4 caricato sul sito può essere inserito con il tag HTML video. In WordPress è generalmente preferibile caricare file ottimizzati e compatibili, perché video molto pesanti aumentano il consumo di spazio e i tempi di caricamento.

Il codice per un video locale è questo:

<div class="video-responsive video-16-9">
<video controls preload="metadata" playsinline>
<source src="https://www.esempio.it/wp-content/uploads/video.mp4" type="video/mp4">
Il browser non supporta la riproduzione dei video HTML5.
</video>
</div>

L’attributo controls mostra i comandi di riproduzione, preload="metadata" carica soltanto le informazioni essenziali e playsinline evita, sui dispositivi compatibili, l’apertura automatica a schermo intero. Sostituisci l’URL di esempio con il collegamento al file presente nella Libreria Media di WordPress.

Per adattare il contenuto alle proporzioni del contenitore puoi aggiungere object-fit:

.video-responsive video {
object-fit: contain;
background: #000;
}

Con object-fit: contain, l’intero video rimane visibile e possono comparire bande nere. Con object-fit: cover, il riquadro viene riempito completamente ma una parte dell’immagine può essere tagliata:

.video-responsive video {
object-fit: cover;
}

Per i video locali è spesso più sicuro usare contain, soprattutto quando il contenuto include testi, schermate software o elementi vicini ai bordi.

Come verificare il video responsivo su smartphone

Dopo aver pubblicato o aggiornato la pagina, controlla il video in una finestra desktop ridimensionata e su almeno uno smartphone. La larghezza dovrebbe seguire quella della colonna WordPress, mentre l’altezza dovrebbe cambiare mantenendo il rapporto definito dalla classe CSS.

Verifica in particolare questi aspetti:

il video non supera i margini del contenuto;
l’iframe non conserva dimensioni fisse visibili su schermi piccoli;
il formato verticale non crea una larghezza eccessiva su desktop;
i controlli del video locale restano accessibili;
il titolo dell’iframe descrive realmente il contenuto;
il caricamento differito non impedisce la visualizzazione dell’anteprima.

Se il video non appare nell’editor o dopo il salvataggio, l’account WordPress potrebbe non avere autorizzazioni sufficienti per inserire codice iframe. WordPress può rimuovere alcuni tag HTML considerati non sicuri quando l’utente non dispone del permesso unfiltered_html; in quel caso è necessario usare il blocco ufficiale YouTube o Vimeo, oppure chiedere l’intervento di un amministratore.

Non inserire il codice CSS dentro il blocco HTML personalizzato se il tema o l’editor lo rimuove. Il CSS va normalmente in CSS aggiuntivo oppure nel foglio stile del tema child, così resta separato dal contenuto e può essere riutilizzato in più pagine.

Il metodo video responsivo WordPress HTML CSS rende incorporamenti YouTube, Vimeo e video locali adattabili a ogni schermo mantenendo proporzioni personalizzate.

FAQ

Sì. Imposta una classe con aspect-ratio, ad esempio aspect-ratio: 4 / 3 oppure aspect-ratio: 9 / 16, e assegnala al contenitore del video.

Sì. Devi usare l’URL di incorporamento Vimeo dentro un elemento iframe, mantenendo il contenitore CSS e le regole width: 100% e height: 100%.

WordPress può rimuovere gli iframe dagli utenti senza il permesso unfiltered_html. È una limitazione di sicurezza legata al ruolo dell’account e alla configurazione del sito.

aspect-ratio mantiene il rapporto tra larghezza e altezza del contenitore; object-fit: contain impedisce inoltre di tagliare il contenuto dei video locali.

Sì. Un blocco HTML personalizzato e alcune regole CSS sono sufficienti per incorporare un video responsivo WordPress HTML CSS.

Altri articoli di questa serie: