Inserimento leggero di YouTube e Vimeo: generatore di facciata
Incolla i link dei video e ottieni un blocco pronto che mostra l'anteprima e carica il player solo dopo il clic. Zero librerie esterne: tutto il necessario è dentro il codice generato.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, privati vimeo.com/ID/HASH. Il timestamp ?t= / &start= viene riportato nella facciata.
Dettagli facoltativi separati da una barra verticale: URL | Titolo | URL della miniatura.
L:A oppure L/A. Finisce nella proprietà CSS aspect-ratio.
hqdefault esiste per qualsiasi video. maxresdefault c'è solo dove l'originale è stato caricato in 720p o superiore: altrimenti l'immagine semplicemente non si apre e lo spettatore vede un rettangolo vuoto.
aria-label del pulsante e nel title dell'iframe.
i.ytimg.com su YouTube: lo restituisce solo l'API oEmbed, e non possiamo interrogarla — lo strumento funziona senza rete. Perciò carica il fotogramma nella libreria media del sito e incolla il link. Senza di esso comparirà un segnaposto sfumato con un pulsante play.
Incolla almeno un link per ottenere il codice.
Da incollare nel blocco Gutenberg «HTML personalizzato». Il blocco contiene <style> e <script>: se il tuo ruolo non ha il permesso unfiltered_html oppure c'è un plugin di sicurezza che rimuove gli script, la facciata mostrerà l'anteprima ma il clic non funzionerà.
Il codice viene composto nel tuo browser. Né il blocco generato né l'anteprima stessa fanno alcuna richiesta esterna: le immagini da i.ytimg.com nell'anteprima sono mostrate come indirizzi, non caricate.
Un solo video incorporato costa più di un megabyte prima del primo clic
Un iframe YouTube standard carica circa 1,3 MB in una ventina di richieste verso sette domini di terze parti — prima ancora che il visitatore abbia deciso di guardare il video. Su una pagina con tre video è il triplo, e quasi sempre è proprio questo a rovinare i punteggi di velocità su mobile. La facciata risolve il problema in modo diretto: all'inizio viene mostrata solo un'immagine di anteprima con il pulsante di riproduzione, e il player vero viene inserito al momento del clic. Prima del clic la pagina pesa un ordine di grandezza in meno. Esiste una libreria popolare per questo, ma tutte le guide consigliano di caricarla da un CDN altrui — cioè togliere una richiesta esterna e aggiungerne un'altra. Qui il codice generato è completamente autosufficiente: stili e script stanno dentro il blocco. C'è un ulteriore effetto sulla privacy. L'iframe standard imposta cookie di tracciamento ancora prima della visione. Il dominio youtube-nocookie.com rimanda tutto all'avvio della riproduzione, la facciata al clic. Per i siti rivolti a un pubblico europeo questo riguarda direttamente i requisiti sul consenso ai cookie.