Une iframe est un cadre situé dans une page web, cadre à l'intérieur duquel est contenu une autre page web, une vidéo, un exercice interactif, un livre numérique...
Différents exemples d'intégration iframe sont proposées dans ce billet.
Page du site Vikidia
Le code HTML :
<iframe src="https://fr.vikidia.org/wiki/Ch%C3%A2teau_fort" style="border:0px;width:100%;height:520px"></iframe>
QCM du site La Quizinière
Le code HTML :
<iframe src="https://www.quiziniere.com/Exercice/PLXRQQ" style="border:0px;width:100%;height:784px"></iframe>
Vidéo hébergée sur le site YouTube (code fourni par le site)
Activité créée sur le site Scratch (code fourni par le site)
Consigne : pose les additions dans ton cahier de mathématiques puis vérifie ton résultat auprès du professeur.
Document PDF déposé dans la Médiathèque
Le code HTML :
<iframe allowfullscreen="1" frameborder="0" height="760px" src="http://blog.ac-versailles.fr/formationblogs/public/PDF/Autorisation-image-voix-travaux-blog.pdf" width="100%"></iframe>
Ebook créé sur le site Book Creator
Cliquer sur 
pour accéder aux options de lecture.
Le code HTML :
<div class="external-media" style="margin: 1em auto; text-align: center;"><iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="470" src="//read.bookcreator.com/DH6mP5JYLudVQTO8dJWPaI193YI3/l32gl8-ySAKnSSbSEaK6UQ?feature=oembed" width="960"></iframe></div>
Le code fourni par Book Creator n'est pas une iframe mais un lien vers la page qui héberge l'ebook.
Calendrier du site Framagenda (code fourni par le site)
Le plugin Events et les widgets associés n'étant plus disponibles sur la plateforme, on peut créer un widget avec une icône agenda qui renvoie vers une page contenant le calendrier ci-dessus.
Magazine publié sur le site Madmagz (code fourni par le site)
Un exercice du site calcul@TICE (code fourni par le site)
Remarques
• On recourt souvent à cette méthode pour intégrer des vidéos ; plus de détails ICI.
• Certains sites fournissent les codes iframe (sites de partage vidéo par exemple) mais il est parfois nécessaire de l'écrire soi-même.
• Pour créer une iframe, modifier l'URL (en rouge) dans un code existant puis tester.
<iframe src="URL_de_la_page_web" style="border:0px;width:400px;height:225px"></iframe>
• Des services en ligne permettent de générer des iframes :
iFrame Generator - Free Générateur d'Iframe - Aspose Générateur d'IFrame
• Pour insérer un tel code dans un billet, basculer vers le mode Source puis coller le code à l'endroit désiré.
• En cas de difficulté pour repérer en mode Source l'endroit désiré, coller le code en début de billet, quitter le mode Source, couper l'élément intégré puis le coller au bon endroit.
• Les dimensions du cadre height et width, exprimées en pixels, peuvent être modifiées ; une largeur (width) à 100 % est à privilégier pour les pages web.
Dans le cas d'une vidéo, il peut être intéressant de rendre l'iframe responsive ; la méthode est décrite ICI.
• L'affichage d'une iframe peut changer en fonction du périphérique utilisé. Par mesure de sécurité, on peut éditer un lien vers la page web contenue dans l'iframe.
• Cliquer ICI pour en savoir plus.
• Attention ! Lorsqu'on insère une iframe, il faut penser à vérifier de temps en temps que la page web externe est toujours en ligne (sinon une erreur 404 apparaîtra dans le cadre) et que son contenu n'a pas été trop modifié.
Méthode alternative
Une autre possibilité, plus simple, consiste à générer un lien auquel on impose de s'ouvrir dans une fenêtre flottante (ou surgissante).
Cette méthode est à privilégier lorsqu'un site est peu adapté à une intégration iframe.
La méthode est décrite ICI.
Exemple avec le site calcul@TICE (lien sur l'image) :
