Mettere video di YouTube sui siti web \u00e8 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 \u00e8 reattivo. Significa che su piccoli dispositivi come cellulari, tablet il tuo video potrebbe non essere bello.<\/p>\n
In realt\u00e0, 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.<\/p>\n
Ho trovato 3 possibili modi per raggiungere il nostro risultato finale. Vediamolo uno per uno.<\/p>\n
Bootstrap \u00e8 lo strumento front-end pi\u00f9 popolare che aiuta a sviluppare siti reattivi. Fornisce anche una soluzione semplice per rendere reattivo il tuo video di YouTube.<\/p>\n
Per iniziare, devi prima includere il file CSS di Bootstrap come segue. Se stai gi\u00e0 utilizzando Bootstrap nel tuo progetto, salta questo passaggio.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/><\/code><\/pre>\nQuindi, usa il seguente codice HTML per incorporare il tuo video usando un Bootstrap.<\/p>\n
<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"embed-responsive embed-responsive-16by9\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"><\/iframe>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\nSostituisci il segnaposto VIDEO_ID con l’ID video effettivo. Provalo e dovresti vedere che il tuo video funziona bene su dispositivi pi\u00f9 piccoli.<\/p>\n
Puoi leggere di questo metodo di incorporamento nella documentazione di Bootstrap<\/a>.<\/p>\nVideo di YouTube reattivo con Fancybox<\/h3>\n
Questa opzione \u00e8 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\u00e0 a essere riprodotto nel pop-up. Questo pu\u00f2 essere fatto usando un fancybox<\/a>.<\/p>\nPer utilizzare Fancybox, devi includere i seguenti file CSS e JS nel tuo sito web.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><\/code><\/pre>\nSuccessivamente, inserisci il codice qui sotto e il gioco \u00e8 fatto.<\/p>\n
<a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\">\n\u00a0\u00a0\u00a0\u00a0<img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/>\n<\/a><\/code><\/pre>\nIncorporamenti YouTube Lite<\/h3>\n
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.<\/p>\n
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.<\/p>\n
Mentre lavoravo su questo argomento, mi sono imbattuto in un articolo che spiega l’incorporamento di video di YouTube in un modo diverso. Non \u00e8 necessario utilizzare un iframe al caricamento della pagina n\u00e9 includere alcun file.<\/p>\n
L’articolo fornisce codice che chiunque pu\u00f2 facilmente aggiungere alla propria applicazione. Segui l’ articolo Lite YouTube Embeds<\/a> e aggiungi il codice come suggerito.<\/p>\nQuesti sono i 3 possibili modi per incorporare un video YouTube reattivo. A seconda delle tue esigenze, puoi scegliere una qualsiasi delle soluzioni.<\/p>\n
articoli Correlati<\/h4>\n