Come inserire i video nelle pagine web (senza utilizzare plugin se usi WordPress) e senza compromettere i tempi di caricamento (PageSpeed)
Se gestisci un sito internet potresti avere la necessità di voler inserire in pagina oltre alle immagini anche dei video. Generalmente, il miglior metodo consiste nel caricare le risorse multimediali in una piattaforma come Youtube o Vimeo e successivamente procedere con l’incorporamento dell’Iframe.
Tuttavia, potresti voler inserire i video senza utilizzare le piattaforme sopra citate e quindi, direttamente in pagina. In questo caso, basta semplicemente effettuare l’upload del video nella libreria media (se usi WordPress o altro sistema CMS) e inserire un elemento in pagina per richiamare la risorsa multimediale.
Ma, cosa succede se carichi localmente un video di generose dimensioni? Semplice, la pagina stenta ad aprirsi!
Quindi, come fare per caricare un video senza compromettere la PageSpeed?
Ti mostrerò un modo semplice per ottimizzare il caricamento dei contenuti video sulle pagine web utilizzando un’immagine come placeholder e ritardando il caricamento in background della risorsa multimediale.
Attraverso l’uso di HTML, CSS e JavaScript potrai fare in modo che i video inseriti in pagina caricheranno solamente quando l’utente deciderà di visualizzarli, riducendo così il tempo di caricamento della pagina e risparmiando larghezza di banda. Questo ti permetterà di offrire una migliore esperienza utente e di ottimizzare le pagine per la SEO.
Come funziona
Il codice è composto da due parti principali: una struttura HTML (per il contenitore del video e un’immagine placeholder) e un codice JavaScript per gestire il caricamento e la riproduzione del video al clic dell’utente. Inoltre, il contenitore ha uno stile CSS che servirà ad ottenere una larghezza del 100%, sia del video che del placeholder.
Ecco il codice completo:
<div id="videoContainer" style="position: relative; max-width: 540px; width: 100%;">
<img id="placeholderImage" src="IMMAGINE_PLACEHOLDER" alt="Anteprima del video" style="width: 100%; cursor: pointer;">
<video id="lsVideo" data-src="URL_DEL_VIDEO" controls style="width: 100%; display: none;"></video>
</div>
<script>
document.getElementById('placeholderImage').addEventListener('click', function() {
var videoContainer = document.getElementById('videoContainer');
var video = document.getElementById('lsVideo');
var videoUrl = video.getAttribute('data-src');
if (videoUrl && !video.getAttribute('src')) {
video.setAttribute('src', videoUrl);
video.load();
video.play();
}
this.style.display = 'none';
video.style.display = 'block';
});
document.getElementById('lsVideo').addEventListener('ended', function() {
var placeholderImage = document.getElementById('placeholderImage');
placeholderImage.style.display = 'block';
this.style.display = 'none';
});
</script>
Ricordati di sostituire “IMMAGINE_PLACEHOLDER” e “URL_DEL_VIDEO” con l’URL dell’immagine e del video che desideri inserire in pagina.
Se desideri oltre al placeholder fare apparire anche la classica icona “Play” al centro dell’immagine puoi utilizzare il seguente codice:
<div id="videoContainer" style="position: relative; max-width: 540px; width: 100%;">
<img id="placeholderImage" src="IMMAGINE_PLACEHOLDER" alt="Anteprima del video" style="width: 100%; cursor: pointer;">
<div id="playIcon" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: white; background-color: #00000080; padding: 8px 18px 8px 24px; border-radius: 50px; cursor: pointer;">►</div>
<video id="lsVideo" data-src="URL_DEL_VIDEO" controls style="width: 100%; display: none;"></video>
</div>
<script>
function loadAndPlayVideo() {
var videoContainer = document.getElementById('videoContainer');
var video = document.getElementById('lsVideo');
var videoUrl = video.getAttribute('data-src');
if (videoUrl && !video.getAttribute('src')) {
video.setAttribute('src', videoUrl);
video.load();
video.play();
}
document.getElementById('placeholderImage').style.display = 'none';
document.getElementById('playIcon').style.display = 'none';
video.style.display = 'block';
}
function resetVideo() {
var placeholderImage = document.getElementById('placeholderImage');
var playIcon = document.getElementById('playIcon');
var video = document.getElementById('lsVideo');
placeholderImage.style.display = 'block';
playIcon.style.display = 'block';
video.style.display = 'none';
}
document.getElementById('placeholderImage').addEventListener('click', loadAndPlayVideo);
document.getElementById('playIcon').addEventListener('click', loadAndPlayVideo);
document.getElementById('lsVideo').addEventListener('ended', resetVideo);
</script>
Anche in questo caso, ricordati di sostituire “IMMAGINE_PLACEHOLDER” e “URL_DEL_VIDEO” con l’URL dell’immagine e del video che desideri inserire in pagina.
