Intégration iframe

Avant d'intégrer une iframe, il y a quelques petites choses à vérifier pour être dans la légalité :

• Vérifier si l'iframe une fois placée sur votre site, n'ajoute pas des cookies. (1), car comme nous n'avons pas de bandeau de consentement de cookie (car nous ne pistons pas les utilisateurs), si vous mettez un cookie externe, vous ne pouvez pas garantir que lui ne le fait pas.
• Charger une iframe, c'est ouvrir un programme externe sur votre site. Si c'est un site est très demandé, ou s'il n'est pas installé sur un serveur rapide ou acceptant de nombreuses demandes, cela peut ralentir le chargement de votre page.
• Certaines iframes sont payantes ou se désactivent au bout d'un certain nombre d'affichages. Vérifiez bien les conditions d'utilisations.

(1) Clic droit, allez sur Inspecter la page puis sur l'onglet Stockage pour voir les cookies. Si vous n'êtes pas sûr, regardez avant de mettre l'iframe et après l'avoir installé.

Réfléchissez aussi à l'utilité... est-ce qu'un lien vers le site en question ne serait-il pas mieux ? et d'un point de vue écoconception, est-ce qu'une image fixe (plutôt qu'une carte interactive, par exemple, sur OpenStreetMap) ne serait pas plus léger ? (une iframe OpenStreetMap pèse 200ko ... il y a des chances que votre image Jpeg ne dépasse pas 100ko)

Exemple avec une carte OpenStreetMap

1. Faire un Paragraph 2 colonnes égales
2. Mettre un Paragraph Simple dans chaque colonne
3. Sur le bloc Simple qui recevra l'iframe, mettre la largeur à Pleine largeur.
4. Récupérer le code HTML de partage sur le site distant (ici sur OpenStreetMap)
5. Éditez le Simple et cliquez sur l'icône "<> Source" pour y mettre le code HTML
6. Ajoutez <div class="iframe-contener"> devant l'iframe et </div> après.
7. Ajoutez dans le balise iframe, à la suite de <iframe , class="iframe-content" et title="Avec votre titre expliquant ce qu'est cette fenêtre, ce qu'elle affiche."
8. Nettoyez dans la balise iframe, les balises qui ne sont pas supportées par le RGAA (lire chapitre ci-dessous)
9. Dans l'autre Simple, on mettre le texte que l'on veut.
10. Note : si on veut mettre du texte sous l'iframe, on devra le faire en dehors de la div (iframe-contener). Ici on remplacera le <small> (qui est interdit) par un <p style="margin-top:0;font-size:0.75rem;"> et le </small>, par un </p>. Le margin-top à zéro permettra de coller le texte sous l'iframe et le font-size affichera le texte en plus petit.

Gestion des iframes

Renseigner l'attribut title sur chaque <iframe> : mettre <iframe title="Titre de ce qu'il y a dans la fenêtre" class...

Présentation de l’information

Restitution visuelle des contenus via un navigateur en mode graphique. La présentation concerne le style, la position et les dimensions des éléments HTML et de leur contenu. La présentation de l’information doit être réalisée via CSS.

Les éléments (basefont, blink, center, font, marquee, s, strike, tt, u, bing et small) et les attributs (align, alink, background, bgcolor, border, cellpading, cellspacing, char, charoff, clear, compact, color, frameborder,hspace, link, marginheight, marginwidth, text, valign, vlink, vspace, size) sont interdits.

Note  : Les attributs width et height utilisés sur d’autres éléments que les balises img, object, embed, canvas et svg, sont également interdits.