Les visiteurs de votre site web pourraient souhaiter obtenir un itinéraire vers votre magasin via Google Maps, un récapitulatif de vos publications sur les réseaux sociaux et une vidéo de démonstration de votre produit en situation réelle. Héberger tous ces contenus sur votre propre serveur web peut s'avérer long et coûteux.
Une iframe peut s'avérer utile si vous souhaitez intégrer du contenu provenant de sources externes (sites tiers, YouTube, Google Maps ou Facebook, par exemple) sans l'héberger sur votre propre serveur web. Ce guide vous expliquera précisément ce que sont les iframes, comment elles fonctionnent, quand les utiliser et comment les ajouter à votre site, ainsi que les compromis en matière de sécurité et de performances à prendre en compte avant leur mise en œuvre.
Qu'est-ce qu'une iframe ?
Une iframe (ou cadre intégré) est un élément HTML qui permet d'intégrer d'autres documents HTML au sein de votre propre page. Cela crée une « fenêtre » ou un « cadre » dans lequel vous pouvez afficher du contenu web provenant d'une autre source, permettant ainsi aux utilisateurs d'interagir avec ce contenu sans quitter votre site (le site hôte ou parent). Vous pouvez utiliser un élément iframe pour intégrer des vidéos, des cartes, des publicités et même des flux de réseaux sociaux, même si le contenu est hébergé sur d'autres plateformes externes.
Les sites web utilisent généralement des iframes pour intégrer des vidéos provenant de plateformes comme Vimeo ou YouTube, afficher des cartes Google Maps, intégrer des widgets tels que des chatbots, des calendriers, des formulaires de réservation ou des flux de réseaux sociaux, et diffuser des publicités ou des bannières d'affiliation. Il est également possible d'inclure des tableaux de bord et des visualisations de données, de prévisualiser des documents comme des diaporamas ou des PDF, et d'intégrer des formulaires de paiement prédéfinis.
Comment fonctionne une iframe ?
Une iframe est un élément HTML compatible avec tous les principaux navigateurs et inclus dans les dernières spécifications HTML5. Lorsqu'un navigateur rencontre un élément iframe dans votre code, il crée un environnement distinct qui affiche du contenu web ou multimédia externe directement dans votre page. Pour vos utilisateurs, ce contenu apparaît comme faisant partie intégrante de votre site, même s'il est hébergé sur un autre serveur web.
Votre site (le site parent) charge le nouveau contenu (le site enfant), créant ainsi un contexte de navigation imbriqué complet qui peut inclure et charger du JavaScript et du CSS depuis le site enfant. Le contenu intégré peut se charger et s'actualiser indépendamment du site parent. Vous (le site parent) pouvez contrôler la taille et la position de l'iframe, ainsi que son niveau d'accès à votre site.
Une iframe utilise de la mémoire et du traitement supplémentaires, donc en charger plus d'une ou deux par page peut ralentir les performances, augmenter les temps de chargement et rendre le site lent, en particulier sur les appareils mobiles.
Comment intégrer des iframes
La méthode traditionnelle pour ajouter un élément iframe consiste à insérer la balise iframe dans le code HTML de votre page web. Si vous utilisez un outil de création de sites web ou une autre application, il existe peut-être un outil ou un éditeur WYSIWYG permettant d'ajouter l'élément iframe au code. Voici deux méthodes courantes pour intégrer votre iframe :
1. Comment ajouter une balise iframe à votre page HTML
Pour ajouter une balise iframe à votre page HTML, ouvrez votre document et insérez la balise iframe :
src="https://www.shopify.com/blog/%3Ca%20href="https://player.vimeo.com/video/123456789" target="_blank" rel="nofollow noopener noreferrer">https://player.vimeo.com/video/123456789"
largeur="640"
hauteur="360"
autoriser="lecture automatique; plein écran; image dans l'image"
autoriser le plein écran>
Dans cet exemple, l'attribut `src` correspond à l'URL de la vidéo intégrée, tandis que les attributs `width` et `height` définissent la taille d'affichage de la vidéo sur votre site. La largeur peut être exprimée en pourcentage de la taille de la fenêtre, un facteur important en conception web adaptative (responsive design) pour s'adapter à différents appareils comme les téléphones et les tablettes. L'élément `frameborder` supprime les bordures traditionnelles autour du cadre vidéo, et l'attribut `allow` permet la lecture automatique de la vidéo en plein écran et en mode image dans l'image (options qui s'affichent dans la fenêtre vidéo).
L'élément iframe possède également les attributs suivants :
-
Srcdoc. Intègre directement du code HTML brut dans l'iframe.
-
Prénom. Donne un nom à l'iframe afin que les liens ou les scripts puissent la cibler.
-
Titre. Décrit le contenu de l'iframe pour l'accessibilité (https://www.shopify.com/blog/%3Ca%20href=”/blog/website-accessibility” target=”_blank”>accessibilité et le référencement (https://www.shopify.com/blog/%3Ca%20href=”/blog/shopify-seo”>SEO), aidant ainsi les moteurs de recherche à comprendre le contenu intégré.
-
Chargement. Contrôle le moment où l'iframe se charge — paramétré sur « lazy » pour améliorer la vitesse de chargement de la page en ne chargeant les iframes que lorsque les utilisateurs font défiler la page jusqu'à elles.
-
Bac à sable. L'attribut sandbox restreint les actions possibles de l'iframe, en bloquant les scripts, les formulaires, pop-ups, etc., sauf autorisation explicite — ce qui protège votre site contre les contenus intégrés potentiellement malveillants.
-
Politique de parrainage. Contrôle les informations de référence (comme l'URL de votre propre page) qui sont envoyées à la page source de l'iframe.
2. Comment copier le code iframe à partir de la source du contenu
Si vous intégrez une vidéo ou un autre contenu provenant d'une plateforme d'hébergement comme YouTube, Vimeo ou Google Maps, copiez l'intégralité du code iframe et collez-le dans votre page web.
Par exemple, si vous utilisez Vimeo, accédez à la vidéo que vous souhaitez intégrer, puis cliquez sur le bouton Intégrer.
Vous verrez ensuite une barre latérale vous permettant de régler les paramètres, comme l'emplacement d'intégration de la vidéo, son affichage fixe ou adaptatif, et les options de lecture (lecture automatique, mise en sourdine ou boucle). Cliquez sur le bouton « Copier le code d'intégration », puis collez ce code dans votre page HTML à l'endroit où vous souhaitez que la vidéo apparaisse.
Le fonctionnement est similaire sur YouTube : cliquez sur le bouton Partager sous la vidéo YouTube que vous souhaitez intégrer, puis sur le bouton Intégrer, copiez le code et collez-le dans votre code HTML.
Intégrer une carte Google est un peu plus complexe. Vous devez demander à Google de créer une clé API pour votre compte (https://www.shopify.com/blog/%3Ca%20href=”/blog/api-key-explained” target=”_blank”>). Ensuite, insérez une URL contenant les paramètres souhaités et votre clé API. Par exemple :
https://www.google.com/maps/embed/v1/MAP_MODE?key=VOTRE_CLÉ_API&PARAMÈTRES)
Vous pouvez ensuite ajouter l'URL avec le mode carte, la clé API et les paramètres dans votre code iframe comme ceci :
largeur="450"
hauteur="250"
frameborder=”0″ style=”border:0″
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place"
?key=VOTRE_CLÉ_API
&q=Tour Eiffel,Paris+France
"
autoriser le plein écran>
Le paramètre q ci-dessus vous permet de définir l'emplacement du marqueur de carte qui s'affichera sur votre page. Il peut s'agir d'un nom de lieu, d'une adresse ou d'un identifiant Google.
Collez ce code dans votre page web, et la carte que vous avez choisie apparaîtra sur la page.
Avantages de l'utilisation des iframes
Une iframe peut vous aider à créer un site web qui répond aux besoins des utilisateurs. Voici ses principaux avantages :
Contenu riche
Une iframe vous permet d'intégrer du contenu que vous ne pourriez pas créer ou héberger vous-même. Elle simplifie considérablement l'intégration de cartes, de vidéos et de flux de réseaux sociaux par rapport à la gestion de ces systèmes distincts sur votre propre serveur.
Meilleure expérience utilisateur
Vos utilisateurs apprécieront les fonctionnalités supplémentaires offertes par votre contenu iframe, comme la prévisualisation de fichiers PDF, l'utilisation de simulateurs de prêt ou le jeu de petits jeux HTML proposés par l'autre site. Mieux encore, ils pourront interagir avec ce contenu sans quitter votre page.
Réduisez votre consommation de bande passante et de ressources serveur.
Héberger vos propres vidéos peut engendrer des frais de bande passante plus élevés et surcharger les ressources de votre serveur. Puisque les vidéos intégrées et les autres contenus sont hébergés ailleurs, votre serveur web n'aura pas à supporter la charge de leur hébergement. Cela pourrait améliorer les performances de vos pages et même réduire vos coûts d'hébergement.
Inconvénients de l'utilisation des iframes
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#11″>Risk of security exploits
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#22″>Lower SEO scores
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#33″>Newer options available
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#44″>Potential copyright infringement
L’utilisation des iframes soulève certaines inquiétudes, et d’autres techniques d’intégration de contenu dynamique peuvent parfois s’avérer plus appropriées :
Risque d'exploitation de la sécurité
Tandis que le
