Come incorporare video di YouTube reattivi nel sito web

Mettere video di YouTube sui siti web è comune al giorno d’oggi. YouTube fornisce un codice iframe per incorporare il video sui siti web. Tuttavia, il video reso tramite questo codice iframe non è reattivo. Significa che su piccoli dispositivi come cellulari, tablet il tuo video potrebbe non essere bello.

In realtà, i tuoi video YouTube incorporati devono essere reattivi per una migliore esperienza utente. In questo articolo, studiamo come incorporare video YouTube reattivi sul tuo sito web.

Ho trovato 3 possibili modi per raggiungere il nostro risultato finale. Vediamolo uno per uno.

Incorpora video reattivi di YouTube utilizzando Bootstrap

Bootstrap è lo strumento front-end più popolare che aiuta a sviluppare siti reattivi. Fornisce anche una soluzione semplice per rendere reattivo il tuo video di YouTube.

Per iniziare, devi prima includere il file CSS di Bootstrap come segue. Se stai già utilizzando Bootstrap nel tuo progetto, salta questo passaggio.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Quindi, usa il seguente codice HTML per incorporare il tuo video usando un Bootstrap.

<div class="container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
    </div>
</div>

Sostituisci il segnaposto VIDEO_ID con l’ID video effettivo. Provalo e dovresti vedere che il tuo video funziona bene su dispositivi più piccoli.

Puoi leggere di questo metodo di incorporamento nella documentazione di Bootstrap.

Video di YouTube reattivo con Fancybox

Questa opzione è leggermente diversa. Qui invece di visualizzare direttamente il video, mostriamo una miniatura del video di YouTube. E quindi facendo clic su una miniatura, il tuo video inizierà a essere riprodotto nel pop-up. Questo può essere fatto usando un fancybox.

Per utilizzare Fancybox, devi includere i seguenti file CSS e JS nel tuo sito web.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Successivamente, inserisci il codice qui sotto e il gioco è fatto.

<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Incorporamenti YouTube Lite

Nel primo metodo, abbiamo utilizzato il codice iframe. Durante l’utilizzo di un iframe, il browser deve scaricare quasi 800 kB di dati per eseguire il rendering di un video.

Usando fancybox, puoi ridurre questo carico. Ma ancora una volta devi includere il loro CSS e JS. Si consiglia di aggiungere questi file tramite CDN per liberare il carico del server.

Mentre lavoravo su questo argomento, mi sono imbattuto in un articolo che spiega l’incorporamento di video di YouTube in un modo diverso. Non è necessario utilizzare un iframe al caricamento della pagina né includere alcun file.

L’articolo fornisce codice che chiunque può facilmente aggiungere alla propria applicazione. Segui l’ articolo Lite YouTube Embeds e aggiungi il codice come suggerito.

Questi sono i 3 possibili modi per incorporare un video YouTube reattivo. A seconda delle tue esigenze, puoi scegliere una qualsiasi delle soluzioni.

articoli Correlati

• Come ottenere l’elenco dei video di YouTube del tuo canale
• Come utilizzare l’API di YouTube per caricare video sul canale YouTube
• Come ottenere i tag video di YouTube utilizzando l’API di YouTube