Iframe responsive (YouTube, Google Maps et autres)

Iframe responsive (YouTube, Google Maps et autres): à quoi ça sert

Le code d’intégration de YouTube et de Google Maps a une largeur et une hauteur fixes et déborde de l’écran du mobile. Collez l’iframe ou seulement l’adresse et obtenez la version qui occupe 100 % de la largeur et conserve les proportions avec aspect-ratio.

L’outil reconnaît YouTube (y compris les Shorts en 9:16), Google Maps, Vimeo, Spotify, Instagram, Canva et Google Forms, suggère la bonne proportion ou la bonne hauteur, ajoute loading=lazy, un title pour les lecteurs d’écran et le plein écran, et affiche l’aperçu que vous pouvez rétrécir pour voir le rendu sur mobile.

Mode d’emploi

1. Collez l’iframe ou l’adresse.
2. Vérifiez la proportion et le title.
3. Copiez le code dans votre site.

Quand l’utiliser

• Vidéo YouTube sur la page d’accueil.
• Carte Google sur la page de contact.
• Lecteur Spotify ou formulaire intégré.

Questions fréquentes

Pourquoi l’iframe déborde-t-il sur mobile ?

Le code d’intégration a une width et une height fixes, par exemple 560 par 315. Sur un mobile de 360 px de large, la vidéo est plus grande que l’écran. Le code généré ici utilise une largeur de 100 % et la propriété aspect-ratio, qui conserve les proportions sur n’importe quel écran.

Que fait loading=lazy ?

Le navigateur ne charge l’iframe que lorsqu’il est sur le point d’apparaître à l’écran. Comme les vidéos et les cartes sont lourdes, le chargement de la page est bien plus rapide quand elles se trouvent plus bas.

À quoi sert le title dans l’iframe ?

Les lecteurs d’écran annoncent le title pour dire ce que contient l’iframe, par exemple Vidéo : comment venir à la boutique. Sans lui, la personne entend seulement cadre et ne sait pas de quoi il s’agit.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires