Un video HTML5 responsive WordPress si adatta alla larghezza dello schermo senza deformare immagini e proporzioni. Con HTML5, CSS e JavaScript puoi sostituire i controlli predefiniti con pulsanti personalizzati per riproduzione, volume, avanzamento e modalità a schermo intero. L’attributo poster mostra un’immagine ordinata prima dell’avvio del filmato. Un fallback testuale e un link al file permettono di gestire browser incompatibili, errori di caricamento e utenti che navigano con JavaScript disattivato. La soluzione seguente funziona in un blocco HTML personalizzato di WordPress, con gli script caricati correttamente dal tema child.

Quali file servono per un video HTML5 responsive WordPress

Prepara almeno un file video in formato MP4 con codec H.264 e un’immagine poster in formato JPG, PNG o WebP. Il formato MP4 offre una compatibilità ampia, mentre WebM può essere aggiunto come sorgente alternativa per i browser che lo supportano.

Carica i file nella Libreria media di WordPress e copia i relativi URL. Per un risultato più affidabile, il poster dovrebbe avere lo stesso rapporto d’aspetto del video, ad esempio 16:9. Evita di usare immagini molto più grandi dell’area effettivamente visualizzata, perché il poster viene scaricato prima della riproduzione.

La struttura HTML deve contenere il video, le sorgenti, il poster e una barra di controllo separata. Inserisci il codice in un blocco HTML personalizzato dell’editor Gutenberg, sostituendo gli URL di esempio con quelli dei file presenti nella Libreria media.

<div class="wp-responsive-player">
<video
class="wp-responsive-video"
poster="https://www.example.com/wp-content/uploads/poster-video.webp"
preload="metadata"
playsinline
aria-label="Presentazione del progetto">
<source
src="https://www.example.com/wp-content/uploads/video-progetto.mp4"
type="video/mp4">
<source
src="https://www.example.com/wp-content/uploads/video-progetto.webm"
type="video/webm">

<p class="wp-video-fallback">
Il browser non supporta la riproduzione del video.
<a href="https://www.example.com/wp-content/uploads/video-progetto.mp4">
Scarica il video in formato MP4
</a>.
</p>
</video>

<div class="wp-video-controls" aria-label="Controlli video">
<button type="button" data-action="play" aria-label="Riproduci video">
Riproduci
</button>

<button type="button" data-action="mute" aria-label="Disattiva audio">
Audio
</button>

<input
type="range"
data-action="seek"
min="0"
max="100"
value="0"
step="0.1"
aria-label="Posizione del video">

<button type="button" data-action="fullscreen" aria-label="Apri a schermo intero">
Schermo intero
</button>
</div>

<p class="wp-video-status" aria-live="polite"></p>
</div>

L’attributo playsinline evita che molti dispositivi mobili aprano automaticamente il video in un lettore separato. preload="metadata" carica soltanto le informazioni iniziali, riducendo il traffico rispetto al precaricamento dell’intero file. Non aggiungere autoplay se il video non è indispensabile al primo impatto: sui dispositivi mobili l’autoplay con audio viene generalmente bloccato.

Come rendere il contenitore video adattabile con CSS

Il CSS seguente mantiene il rapporto 16:9, nasconde i controlli nativi e dispone i controlli personalizzati sotto il video. La proprietà aspect-ratio evita di impostare altezze fisse che possono creare spazi vuoti o deformazioni su smartphone.

Inserisci questo codice in Aspetto > Personalizza > CSS aggiuntivo, se il tema offre questa voce, oppure nel foglio di stile del tema child.

.wp-responsive-player {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #111;
color: #fff;
}

.wp-responsive-video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
object-fit: contain;
}

.wp-video-controls {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
flex-wrap: wrap;
}

.wp-video-controls button {
border: 1px solid #777;
border-radius: 0.25rem;
padding: 0.5rem 0.75rem;
background: #222;
color: #fff;
cursor: pointer;
}

.wp-video-controls button:focus-visible,
.wp-video-controls input:focus-visible {
outline: 3px solid #65b7ff;
outline-offset: 2px;
}

.wp-video-controls input[type="range"] {
flex: 1 1 180px;
min-width: 120px;
}

.wp-video-status {
margin: 0;
padding: 0 0.75rem 0.75rem;
color: #ddd;
}

.wp-video-fallback {
padding: 1rem;
background: #222;
}

@media (max-width: 480px) {
.wp-video-controls {
gap: 0.5rem;
}

.wp-video-controls button {
font-size: 0.9rem;
padding: 0.45rem 0.6rem;
}
}

Il colore scuro del contenitore migliora la leggibilità dei controlli sopra il poster. object-fit: contain conserva l’intero fotogramma, mentre object-fit: cover riempie tutto il riquadro tagliando eventualmente una parte del video.

Come collegare i controlli personalizzati con JavaScript

JavaScript deve gestire gli eventi del video senza modificare il file originale. Il codice seguente aggiorna il pulsante di riproduzione, sincronizza la barra di avanzamento, attiva il silenziamento e usa la modalità a schermo intero quando il browser la rende disponibile.

Non inserire questo script direttamente dentro un blocco HTML personalizzato se il sito lo rimuove o lo considera non sicuro. Salvalo, ad esempio, come responsive-video.js nel tema child e caricalo con functions.php.

document.addEventListener("DOMContentLoaded", function () {
const players = document.querySelectorAll(".wp-responsive-player");

players.forEach(function (player) {
const video = player.querySelector(".wp-responsive-video");
const playButton = player.querySelector('[data-action="play"]');
const muteButton = player.querySelector('[data-action="mute"]');
const seek = player.querySelector('[data-action="seek"]');
const fullscreenButton = player.querySelector('[data-action="fullscreen"]');
const status = player.querySelector(".wp-video-status");
const fallback = player.querySelector(".wp-video-fallback");

function updatePlayButton() {
playButton.textContent = video.paused ? "Riproduci" : "Pausa";
playButton.setAttribute(
"aria-label",
video.paused ? "Riproduci video" : "Metti in pausa il video"
);
}

playButton.addEventListener("click", function () {
if (video.paused) {
video.play().catch(function () {
status.textContent = "La riproduzione richiede un'azione dell'utente.";
});
} else {
video.pause();
}
});

muteButton.addEventListener("click", function () {
video.muted = !video.muted;
muteButton.textContent = video.muted ? "Audio disattivato" : "Audio";
muteButton.setAttribute(
"aria-label",
video.muted ? "Riattiva audio" : "Disattiva audio"
);
});

video.addEventListener("loadedmetadata", function () {
seek.max = video.duration;
seek.value = 0;
});

video.addEventListener("timeupdate", function () {
seek.value = video.currentTime;
});

seek.addEventListener("input", function () {
video.currentTime = Number(seek.value);
});

video.addEventListener("play", updatePlayButton);
video.addEventListener("pause", updatePlayButton);
video.addEventListener("ended", updatePlayButton);

fullscreenButton.addEventListener("click", function () {
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (video.webkitEnterFullscreen) {
video.webkitEnterFullscreen();
} else {
status.textContent = "La modalità a schermo intero non è disponibile.";
}
});

video.addEventListener("error", function () {
fallback.hidden = false;
status.textContent = "Il video non può essere riprodotto.";
});

updatePlayButton();
});
});

L’uso di querySelectorAll consente di inserire più lettori nella stessa pagina senza duplicare lo script. L’evento error rende visibile il messaggio di fallback quando il file è assente, corrotto o non supportato dal browser.

Per caricare lo script dal tema child, aggiungi il seguente codice al file functions.php. Il percorso deve corrispondere alla posizione reale del file JavaScript.

<?php
function backdigit_responsive_video_assets() {
wp_enqueue_script(
'backdigit-responsive-video',
get_stylesheet_directory_uri() . '/assets/js/responsive-video.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_responsive_video_assets');

Il parametro finale true richiede a WordPress di caricare lo script nel footer, dopo il contenuto HTML. Se utilizzi un tema non child, gli aggiornamenti possono sovrascrivere il file; per questo è preferibile lavorare con un tema child o con una modalità di personalizzazione che conservi le modifiche.

Come verificare compatibilità, accessibilità e prestazioni

Apri la pagina su desktop e smartphone controllando che il video mantenga il rapporto d’aspetto, che il poster sia visibile prima della riproduzione e che ogni pulsante sia utilizzabile anche da tastiera. Il testo alternativo del video non sostituisce una trascrizione: per contenuti informativi aggiungi una descrizione o una trascrizione leggibile nella pagina.

Verifica anche questi aspetti:

Il file MP4 deve essere raggiungibile tramite URL HTTPS.
Il poster deve essere realmente pubblico e non bloccato da hotlink protection o plugin di sicurezza.
Il link di download del fallback deve puntare al file corretto.
Il testo dei pulsanti deve restare comprensibile senza affidarsi soltanto alle icone.
Il video non dovrebbe partire automaticamente con audio.
La compressione deve ridurre il peso senza rendere il testo o le immagini illeggibili.

Se il video non parte, controlla prima il formato del file, il percorso generato dalla Libreria media e la console del browser. Un errore 404 indica un URL errato, mentre un errore di formato può dipendere da codec non supportati anche quando l’estensione del file è MP4.

Un video HTML5 responsive WordPress ben strutturato combina HTML semantico, CSS fluido e JavaScript accessibile senza dipendere dai controlli nativi.

FAQ

Sì. Il video mantiene la riproduzione di base tramite il browser e il testo dentro l’elemento video fornisce un fallback. Senza JavaScript, però, i controlli personalizzati non funzionano.

Controlla che l’URL dell’attributo poster sia pubblico, corretto e raggiungibile in HTTPS. Verifica anche che il formato dell’immagine sia supportato dal browser.

No, MP4 con codec H.264 è spesso sufficiente. WebM è una sorgente aggiuntiva utile per aumentare la compatibilità e offrire un formato alternativo.

Safari per iOS può applicare comportamenti diversi alla modalità a schermo intero. Il metodo webkitEnterFullscreen incluso nello script gestisce alcuni dispositivi, ma non può garantire un comportamento identico su tutte le versioni di iOS.

Sì. Inserisci nel tag video un elemento track con un file WebVTT, specificando lingua, etichetta e attributo kind="subtitles".

Altri articoli di questa serie: