Iframe responsive (YouTube, Google Maps e altri)

Iframe responsive (YouTube, Google Maps e altri): a cosa serve

Il codice di incorporamento di YouTube e Google Maps ha larghezza e altezza fisse e sborda dallo schermo dello smartphone. Incolla l’iframe o solo l’indirizzo e ottieni la versione che occupa il 100% della larghezza e mantiene la proporzione con aspect-ratio.

Lo strumento riconosce YouTube (anche gli Shorts in 9:16), Google Maps, Vimeo, Spotify, Instagram, Canva e Google Forms, suggerisce la proporzione o l’altezza giusta, aggiunge loading=lazy, un title per gli screen reader e lo schermo intero, e mostra l’anteprima che puoi restringere per vedere come appare sullo smartphone.

Come si usa

1. Incolla l’iframe o l’indirizzo.
2. Controlla la proporzione e il title.
3. Copia il codice nel sito.

Quando usarlo

• Video di YouTube nella home page.
• Mappa di Google nella pagina dei contatti.
• Player di Spotify o form incorporato.

Domande frequenti

Perché l’iframe sborda su smartphone?

Il codice di incorporamento ha width e height fissi, come 560 per 315. Su uno smartphone largo 360 px, il video risulta più grande dello schermo. Il codice generato qui usa larghezza del 100% e la proprietà aspect-ratio, che mantiene la proporzione su qualsiasi schermo.

Cosa fa loading=lazy?

Il browser carica l’iframe solo quando sta per apparire sullo schermo. Poiché video e mappe pesano parecchio, la pagina si carica molto più in fretta quando si trovano più in basso.

A cosa serve il title nell’iframe?

Gli screen reader leggono il title per dire cosa c’è dentro l’iframe, come ‘Video: come arrivare al negozio’. Senza, la persona sente solo ‘frame’ e non sa di cosa si tratta.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili