Qu'est-ce qu'un Iframe et comment l'intégrer dans une page ?

Iframe, pour « inlineframe », est un élément HTML qui permet au développeur d'intégrer sur son site web des contenus en provenance d'autres sites web. Les Iframes servent par exemple à insérer une vidéo YouTube : l'utilisateur du site web n'a pas besoin d'ouvrir YouTube dans un nouvel onglet, la vidéo s'affiche directement sur la page qu'il est en train de consulter. Pour le développeur, c'est une manière d'importer un contenu intéressant, à condition bien sûr d'y être autorisé. L'Iframe simplifie en outre le travail du développeur. Intégrer une carte Google Maps avec Iframe, par exemple, lui évite d'avoir à coder lui-même une carte interactive pour son site.

À quoi sert l'élément Iframe ?

L'élément Iframe sert à afficher un contenu tiers sur une page web. Le code HTML de l'Iframe fonctionne ainsi :

1. Le développeur écrit l'élément Iframe à l'endroit de la page où afficher le contenu.
2. La balise d'Iframe indique a minima l'URL source du contenu à afficher : le navigateur s'y réfère pour aller récupérer le contenu.
3. Des attributs d'Iframe permettent de personnaliser le cadre dans lequel s'insère le contenu. Le développeur définit par exemple la hauteur et la largeur du cadre.
4. Si le contenu est interactif, le développeur peut en gérer le comportement. Il indique par exemple que la lecture d'une vidéo sur la page doit démarrer à partir d'un moment précis.

L'Iframe est utile au développeur à deux égards :

• Le développeur veut afficher une ressource intéressante trouvée sur le web. Il peut s'agir d'intégrer une image, une vidéo, une publication sur un réseau social ou une page entière d'un site tiers, par exemple.
• Le développeur doit insérer un contenu complexe à coder : des boutons de réseaux sociaux, une carte ou un formulaire interactif, par exemple. Pour gagner du temps, il intègre directement le contenu, fonctionnel et clé en main, depuis un site externe.

Les Iframes servent en outre des enjeux d'expérience utilisateur : insérer le contenu dans la page web évite à l'utilisateur d'ouvrir un nouvel onglet ou une nouvelle fenêtre de navigation. Le parcours utilisateur, ainsi, est plus fluide. D'autant plus que le contenu intégré se comporte de manière individualisée : l'utilisateur peut le faire défiler indépendamment de la page web.

Exemples d'utilisation d'Iframe

Intégrer une page web

Pour afficher une page web externe dans une page web de son site, le développeur insère un élément Iframe dans son document HTML.

See the Pen iframe_exemple-page-web by HubSpot France (@HubSpot-France) on CodePen.

Intégrer une vidéo YouTube

L'Iframe est souvent utilisé pour intégrer une vidéo YouTube dans une page web. YouTube, à cet égard, génère automatiquement le code HTML de l'Iframe. Il suffit de cliquer sur le bouton « Partager », en-dessous de la vidéo, puis sur le bouton « Intégrer ». YouTube propose plusieurs options : afficher ou non les commandes de lecteur, démarrer la vidéo à un moment déterminé, renforcer les paramètres de confidentialité des données.

See the Pen iframe_exemple-video-youtube by HubSpot France (@HubSpot-France) on CodePen.

Intégrer une carte Google Maps

Google Maps autorise les sites web à se servir de sa technologie, pour afficher des cartes interactives. Un développeur peut par exemple utiliser un extrait de carte Google Maps à des fins de géolocalisation, pour améliorer l'expérience utilisateur. Google Maps génère automatiquement le code HTML de l'Iframe depuis le bouton de partage, dans l'onglet « Intégrer une carte ».

See the Pen iframe_exemple-carte-interactive by HubSpot France (@HubSpot-France) on CodePen.

Intégrer une publication Facebook

L'élément Iframe peut être utilisé pour intégrer sur une page web du contenu issu de réseaux sociaux. Facebook, par exemple, permet d'afficher une publication sur un site depuis le bouton « Intégrer à un site » de la publication.

Quelle est la différence entre Iframe et embed ?

Iframe et embed sont deux éléments HTML qui permettent de faire des choses similaires. Comme Iframe, en effet, embed intègre du contenu externe à une page web. D'ailleurs, remplacer la balise Iframe par la balise embed dans un éditeur de code produit le même résultat.

L'élément embed, toutefois, a posé des difficultés en matière de sécurité et d'accessibilité. C'est pourquoi actuellement, Iframe est privilégié à embed. Utiliser Iframe limite le risque de dysfonctionnements et d'erreurs à l'affichage de la page web.

Comment intégrer un Iframe sur une page ?

1 - Écrire le code HTML

Pour intégrer un Iframe sur une page, il faut écrire le code HTML de l'Iframe à l'endroit où le contenu tiers doit s'afficher. Le code HTML utilise la syntaxe suivante : <iframe src="adresse URL source"></iframe>.

• L'élément Iframe a une balise d'ouverture et une balise de fermeture.
• L'attribut src est indispensable pour indiquer au navigateur l'URL source où récupérer le contenu à intégrer.
• D'autres attributs, facultatifs, permettent de personnaliser l'Iframe.

2 - Renseigner les attributs de l'Iframe

Exemples d'attributs de l'élément Iframe :

• L'attribut title est recommandé dans un enjeu d'accessibilité. Il permet de renseigner la description du contenu intégré, qui sera lue par les lecteurs d'écran.
• L'attribut height permet de personnaliser la hauteur du cadre Iframe. L'attribut width permet d'en définir la largeur.
• L'attribut allowfullscreen sert à paramétrer les possibilités d'affichage. À la valeur true, l'utilisateur a la possibilité d'afficher le contenu en plein écran.

Certains attributs d'Iframe sont déconseillés en HTML5. C'est le cas par exemple de l'attribut frameborder, qui détermine les paramètres de bordure du cadre. À la place de cet attribut, ainsi que des autres attributs obsolètes, il est recommandé d'utiliser CSS pour définir les propriétés de style de l'Iframe.

Comment rendre un Iframe responsive ?

Un Iframe responsive est un Iframe qui adapte l'affichage du contenu à l'écran de l'ordinateur ou du mobile utilisé pour consulter le site web. Sur mobile et sur ordinateur en effet, l'écran n'a pas la même taille. Pour un rendu lisible et esthétique, il faut rendre l'Iframe responsive.

C'est grâce à CSS que l'Iframe peut être rendu responsive. Il faut correctement paramétrer les propriétés CSS position, top, left, bottom, right, width et height. Quand le code HTML de l'Iframe est généré automatiquement par le site web source, sur YouTube par exemple, il faut penser à le modifier.

Inconvénients d'un Iframe

Pour utiliser les Iframes en connaissance de cause, il est important d'analyser préalablement leurs inconvénients, pour évaluer le risque.

• Les moteurs de recherche ne traitent pas systématiquement le contenu de l'Iframe. Cela pose problème en SEO. Si le contenu n'est pas indexé par le moteur de recherche, en effet, le référencement du site web en pâtit. Lorsque le contenu est peu pertinent sur le plan SEO, le risque est moindre. Dans le cas contraire, le développeur remplace l'Iframe par un autre élément HTML mieux pris en charge par les moteurs de recherche.
• Les Iframes peuvent poser problème en matière de sécurité. Le contenu importé, en effet, provient d'une page tierce. Le développeur n'est pas en mesure, a priori, de vérifier que cette source est fiable et qu'elle va le rester. En cas de faille, le système de l'utilisateur risque d'être abimé.
• Quand un développeur utilise un Iframe généré automatiquement par un site tiers, il doit être attentif à sa politique de confidentialité des données. Certains sites en effet collectent des données d'utilisateurs, sans leur accord préalable, alors même que ces utilisateurs n'ont pas interagi avec le contenu. Sur les plans éthique et légal, la pratique est risquée.
• Les Iframes sont des documents HTML intégrés dans un document HTML : ils « alourdissent » le site web. Multiplier les Iframes risque de nuire à la performance du site.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.