Comment intégrer un iframe sur une page web ?

L'intégration d'un iframe dans une page web permet d'afficher un contenu tiers, comme un formulaire Oplead ou le macaron Eldo, ou tout autre contenu provenant d'une autre URL.

Étape 1 : Écrire le code HTML de l'iframe

Pour afficher un contenu via un iframe, commencez par insérer le code HTML correspondant à l'endroit où vous souhaitez que le contenu s'affiche. Le code de base pour intégrer un iframe est le suivant :

• Balises d'ouverture et de fermeture : L'élément iframe nécessite une balise d'ouverture <iframe> et une balise de fermeture </iframe>.
• Attribut src : L'attribut src est obligatoire pour indiquer l'URL source du contenu que vous souhaitez intégrer.

Étape 2 : Personnaliser l'iframe avec des attributs

Pour ajuster l'affichage et l'accessibilité de l'iframe, plusieurs attributs peuvent être utilisés :

• title : Recommandé pour l'accessibilité, il permet de fournir une description du contenu qui peut être lue par les lecteurs d'écran.
• height et width : Ces attributs définissent respectivement la hauteur et la largeur de l'iframe.
• allowfullscreen : Cet attribut, avec la valeur true, permet à l'utilisateur de basculer le contenu en mode plein écran.

Remarque : Certains attributs, comme frameborder, sont obsolètes en HTML5. Il est préférable d'utiliser des propriétés CSS pour styliser l'iframe.

Étape 3 : Rendre un iframe responsive

Un iframe responsive ajuste automatiquement son affichage selon la taille de l'écran (ordinateur, tablette, mobile). Pour rendre un iframe responsive, utilisez le CSS pour paramétrer les propriétés suivantes :

• position, top, left, bottom, right
• width et height

Voici un exemple de code CSS pour un iframe responsive :