Utilizzare un video YouTube incorporato come sfondo è una tecnica comune nei siti web odierni. Puoi usare il tag video HTML5 per creare un video di sfondo. Tuttavia, ciò significherebbe ospitare un video online da qualche parte. E non so tu, ma nel mio caso, cerco sempre di evitare questa opzione. Gli incorporamenti di video YouTube sono una buona alternativa ai video self-hosted. Risparmiano larghezza di banda e si caricano super velocemente. Ma, poiché sono in un iframe, possono essere un po’ più complicati da gestire. In questo tutorial, esamineremo come creare uno sfondo video YouTube per il nostro sito web.
Ottenere l’HTML per il video YouTube incorporato
La prima cosa che dobbiamo fare è prendere il codice di incorporamento del video YouTube che vogliamo visualizzare sullo sfondo. Basta andare al video scelto e fare clic sul pulsante “condividi”.
Condivisione YouTube
Appariranno diverse opzioni. Fai clic su quella “incorpora”.
Incorporamento YouTube
Questo aprirà una nuova casella sullo schermo con il codice per il video che vuoi incorporare. Disattiva “Mostra controlli player” nelle opzioni di incorporamento e poi clicca sul pulsante “copia”.
Codice di incorporamento YouTube
Ora crea un contenitore div e incolla lì il tuo codice di incorporamento.
<div class="video-container"> <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Yj2iELI6OeI?controls=0" title="Lettore video YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
Linguaggio del codice: HTML, XML (xml)
Rimuoveremo tutte le proprietà non necessarie, che sono tutte tranne controlli=0 (anche le proprietà larghezza e altezza devono essere rimosse). Infine aggiungeremo due proprietà extra: autoplay=1, mute=1 e playsinline=1.
<div class="video-container"> <iframe src="https://www.youtube.com/embed/Yj2iELI6OeI?&autoplay=1&mute=1&playsinline=1"></iframe> </div>
Linguaggio del codice: HTML, XML (xml)
Nota come il parametro playsinline sia obbligatorio per riprodurre video in linea su iOS e altri dispositivi mobili. Ulteriori informazioni sulla Youtube IFrame Player API.
Il risultato finale è un div video-container che ha un iframe che contiene la fonte del video di YouTube. Questo video verrà riprodotto automaticamente in modalità muto quando uno dei nostri utenti visita la nostra pagina web.
Centrare lo sfondo del video di YouTube con CSS
Per trasformare l’iframe in uno sfondo video di YouTube a pagina intera, applicheremo alcune proprietà CSS al video-container padre e all’iframe:
.video-container{
width: 100vw;
height: 100vh; }
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
Linguaggio del codice: CSS (css)
Le proprietà CSS applicate al contenitore padre lo ridimensionano al 100% dell’altezza e della larghezza della finestra di visualizzazione dello schermo. Anche l’iframe che si trova all’interno viene ridimensionato al 100% dell’altezza e della larghezza della finestra di visualizzazione dello schermo.
L’iframe avrà una posizione assoluta che ci consentirà di posizionare l’iframe esattamente dove vogliamo. In questo caso, è posizionato sopra il contenitore padre. Gli attributi di posizionamento top e left vengono utilizzati per impostare la posizione dell’angolo superiore sinistro dell’iframe al centro dello schermo.
Per centrare lo sfondo del nostro video di YouTube, utilizziamo transform per applicare un margine superiore negativo pari a metà dell’altezza del video e un margine sinistro negativo pari a metà della larghezza del video. Ciò compenserà l’iframe rispetto all’elemento (non il contenitore padre) centrando lo sfondo del video di YouTube verticalmente e orizzontalmente.
Rendere il nostro video a schermo intero
Come puoi vedere ora, il nostro video di YouTube è posizionato al centro dello schermo, ma non è stato ridimensionato per essere l’intera larghezza del nostro sito web. Per farlo, utilizzeremo la funzionalità multimediale aspect-ratio:
@media (min-aspect-ratio: 16/9) {
.video-container iframe {
/* height = 100 * (9 / 16) = 56,25 */
height: 56,25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-container iframe {
/* width = 100 / (9 / 16) = 177,777777 */
width: 177,78vh; }
}
Linguaggio del codice: CSS (css)
Il rapporto di aspetto è il rapporto tra larghezza e altezza della finestra. 16:9 indica una larghezza di 16 unità e un’altezza di 9 unità. 16:9 è il rapporto di aspetto widescreen standard utilizzato sul Web. In genere, la maggior parte dei video viene girata con questo rapporto di aspetto.
Il rapporto di aspetto 16:9 corrisponde al 56,25 dell’altezza della finestra e al 177,78 della larghezza della finestra. Per creare un rapporto 16:9, dobbiamo dividere 9 per 16 (0,5625 o 56,25%). Ciò consente al browser di determinare le dimensioni del video in base alla larghezza del suo contenitore padre. Ciò manterrà il rapporto di aspetto del video di YouTube mentre si ridimensiona per adattarsi allo sfondo della pagina Web. Aggiungere testo sovrapposto sopra il nostro video
Il testo da visualizzare sopra il nostro video di YouTube in background viene inserito in un div separato come segue:
<div id="text"> <h1>Utilizzare un video di YouTube come sfondo a schermo intero con CSS</h1> </div>
Linguaggio del codice: HTML, XML (xml)
Il CSS viene applicato al div di testo per spostarlo insieme a qualsiasi suo contenuto sopra il video:
#text{
position: absolute;
color: #FFFFFF;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Linguaggio del codice: CSS (css)
Abbiamo applicato le stesse proprietà CSS che abbiamo fatto sull’iframe per centrare il div di testo al centro della nostra pagina web. Vorrai assicurarti che il testo che è posizionato sopra lo sfondo del nostro video di YouTube abbia un contrasto elevato in modo che possa essere letto facilmente.
Puoi anche posizionare altri elementi come i pulsanti di passaggio del mouse e utilizzare le stesse proprietà CSS per posizionarli sopra lo sfondo del nostro video di YouTube.
Aggiunta dell’opzione di loop incorporato di YouTube
Se utilizzi un video breve, noterai come vengono visualizzati i video correlati una volta terminato il video. Per evitare ciò, dobbiamo usare un piccolo trucco. Aggiungere il parametro loop=1 alla sorgente del video non è più sufficiente, dobbiamo aggiungere più parametri e questo è quello della playlist a cui assegneremo l’ID del video di YouTube.
Quindi, se abbiamo questo video dovremmo cercare il suo id, che è il codice dopo la parte /embed/ o dopo ?v= quando si accede al video tramite YouTube. Quindi, lo incolliamo semplicemente sul nostro parametro playlist:
&playlist=Yj2iELI6OeI&loop=1
Linguaggio del codice: HTML, XML (xml)
Il nostro video incorporato finale dovrebbe apparire così:
<iframe src="https://www.youtube.com/embed/Yj2iELI6OeI?controls=0&autoplay=1&mute=1&playsinline=1&playlist=Yj2iELI6OeI&loop=1"> </iframe>
Linguaggio del codice: HTML, XML (xml)
Ed ecco il risultato: un bellissimo video a schermo intero con YouTube!
See the Pen
Use a youtube video as full screen background with CSS by Álvaro (@alvarotrigo)
on CodePen.
Conclusione
Creare uno sfondo video di YouTube è una delle soluzioni più semplici per fare la differenza e distinguersi dai tuoi concorrenti sul web. Gli utenti che accedono al tuo sito web saranno immersi in un’esperienza visiva unica che non dimenticheranno facilmente.
Questa tecnica può essere piuttosto impressionante con i video a schermo intero sui siti web che utilizzano fullPage.js. Guarda questo esempio di video a schermo intero!
Ora che hai imparato come creare uno sfondo video di YouTube, è il momento di “metterti in mostra”! Se hai intenzione di avviare un’attività, creare una landing page con uno sfondo video di YouTube sarebbe una soluzione semplice che causerà allo stesso tempo un’ottima impressione sui tuoi possibili clienti. Condividi con noi i tuoi siti web quando hai finito. Ci piacerebbe vederli!
