HTML : corriger l’attribut iframe frameborder obsolète

Si vous validez une page HTML et obtenez l’erreur suivante, votre code contient probablement un ancien attribut sur une iframe :

The frameborder attribute on the iframe element is obsolete. Use CSS instead.Langage du code : PHP (php)

Ce message signifie que l’attribut frameborder ne doit plus être utilisé sur un élément <iframe>. Il était courant dans les vieux embeds YouTube, Vimeo, Dailymotion, Google Maps ou widgets tiers. Mais en HTML moderne, on gère la bordure avec CSS.

La correction est simple : supprimez frameborder="0", puis utilisez border: 0; en CSS si vous ne voulez aucune bordure.

Le code iframe obsolète

Voici le type de code qui déclenche l’erreur dans un validateur HTML :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	width="560"
	height="315"
	frameborder="0"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Le problème se trouve ici :

frameborder="0"Langage du code : JavaScript (javascript)

Cet attribut appartient à l’ancien monde des frames. Aujourd’hui, il est obsolète et non conforme. Le navigateur peut encore l’interpréter par compatibilité, mais votre HTML n’est plus propre.

La correction avec CSS

Remplacez l’attribut HTML par une règle CSS.

Code HTML corrigé :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	width="560"
	height="315"
	title="Vidéo YouTube intégrée"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

CSS associé :

iframe {
	border: 0;
}Langage du code : CSS (css)

Si vous voulez cibler uniquement les iframes vidéo, utilisez une classe. C’est plus propre que de supprimer toutes les bordures de toutes les iframes du site, y compris celles qui pourraient en avoir besoin.

<iframe
	class="responsive-video"
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	width="560"
	height="315"
	title="Vidéo YouTube intégrée"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

.responsive-video {
	border: 0;
}Langage du code : CSS (css)

Avant / après

Ancien code à corriger :

<iframe
	src="https://player.vimeo.com/video/123456789"
	width="640"
	height="360"
	frameborder="0"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Nouveau code HTML valide :

<iframe
	class="video-embed"
	src="https://player.vimeo.com/video/123456789"
	width="640"
	height="360"
	title="Vidéo Vimeo intégrée"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

CSS :

.video-embed {
	border: 0;
}Langage du code : CSS (css)

Ajouter un title à chaque iframe

Profitez de cette correction pour ajouter un attribut title à vos iframes. C’est important pour l’accessibilité, car un lecteur d’écran doit pouvoir comprendre ce que contient le cadre intégré.

Exemple faible :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="iframe"></iframe>Langage du code : HTML, XML (xml)

Exemple plus utile :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="Vidéo : démonstration HTML iframe sans frameborder"></iframe>Langage du code : HTML, XML (xml)

Le titre doit décrire le contenu intégré. “iframe”, “video” ou “embed” ne servent pas à grand-chose. C’est un peu comme nommer tous ses fichiers “document-final-vrai-final.pdf”. Techniquement possible, humainement discutable.

Rendre une iframe responsive

Corriger frameborder, c’est bien. Mais beaucoup d’anciens embeds ont aussi un autre problème : ils utilisent une largeur fixe. Sur mobile, cela peut casser la mise en page.

Pour une vidéo moderne, utilisez un wrapper responsive avec aspect-ratio.

<div class="embed-responsive">
	<iframe
		src="https://www.youtube.com/embed/dQw4w9WgXcQ"
		title="Vidéo YouTube intégrée"
		allowfullscreen></iframe>
</div>Langage du code : HTML, XML (xml)

.embed-responsive {
	aspect-ratio: 16 / 9;
	width: 100%;
}

.embed-responsive iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}Langage du code : CSS (css)

Cette approche évite les vieux hacks avec padding-bottom, sauf si vous devez encore gérer des navigateurs très anciens.

Ajouter loading= »lazy » pour les iframes hors écran

Les iframes peuvent être lourdes, surtout celles de YouTube, Vimeo, Google Maps ou de widgets sociaux. Si l’iframe n’est pas visible immédiatement au chargement, ajoutez loading="lazy".

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="Vidéo YouTube intégrée"
	loading="lazy"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Cela permet au navigateur de différer le chargement de l’iframe jusqu’à ce qu’elle soit proche de la zone visible. C’est souvent excellent pour les performances, surtout sur mobile.

Évitez toutefois le lazy loading sur une iframe critique visible immédiatement au-dessus de la ligne de flottaison. Comme toujours : mesurer avant de saupoudrer.

Ajouter allow pour les fonctionnalités autorisées

Les embeds modernes utilisent souvent l’attribut allow pour préciser les fonctionnalités autorisées dans l’iframe : lecture automatique, plein écran, presse-papiers, gyroscope, image dans l’image, etc.

Exemple YouTube courant :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="Vidéo YouTube intégrée"
	loading="lazy"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Ne copiez pas aveuglément des permissions inutiles. Accordez seulement ce dont l’embed a besoin. C’est plus propre et plus sûr.

Utiliser sandbox quand c’est possible

L’attribut sandbox permet de restreindre ce que le contenu intégré peut faire. Il est très utile pour des iframes contenant du contenu tiers non totalement maîtrisé.

<iframe
	src="https://example.com/widget"
	title="Widget intégré"
	loading="lazy"
	sandbox></iframe>Langage du code : HTML, XML (xml)

Un sandbox vide applique des restrictions fortes. Vous pouvez ensuite ajouter des autorisations précises si nécessaire.

<iframe
	src="https://example.com/widget"
	title="Widget intégré"
	loading="lazy"
	sandbox="allow-scripts allow-same-origin"></iframe>Langage du code : HTML, XML (xml)

Attention : certains embeds comme YouTube, Vimeo, cartes ou outils de paiement peuvent ne pas fonctionner avec un sandbox trop restrictif. Testez toujours.

Contrôler le referrer avec referrerpolicy

L’attribut referrerpolicy permet de contrôler les informations de provenance envoyées au contenu intégré.

Exemple raisonnable :

<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="Vidéo YouTube intégrée"
	loading="lazy"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Pour des contenus tiers, ce réglage peut limiter les informations transmises sans casser l’embed. Là encore, testez selon le fournisseur.

Exemple complet d’iframe YouTube moderne

Voici un exemple propre pour intégrer une vidéo YouTube sans frameborder, avec un titre, du lazy loading, une politique de referrer et un wrapper responsive.

<div class="embed-responsive">
	<iframe
		src="https://www.youtube.com/embed/dQw4w9WgXcQ"
		title="Vidéo YouTube intégrée"
		loading="lazy"
		referrerpolicy="strict-origin-when-cross-origin"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
		allowfullscreen></iframe>
</div>Langage du code : HTML, XML (xml)

.embed-responsive {
	aspect-ratio: 16 / 9;
	width: 100%;
}

.embed-responsive iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}Langage du code : CSS (css)

Ce code remplace avantageusement les anciens embeds remplis d’attributs obsolètes. Il est plus lisible, plus responsive et plus facile à maintenir.

Et dans WordPress ?

Dans WordPress, le plus simple est souvent d’utiliser les blocs natifs d’intégration : YouTube, Vimeo, SoundCloud, Spotify, Twitter/X, etc. WordPress génère alors l’embed via oEmbed, sans que vous ayez besoin de coller manuellement une iframe complète.

Si vous collez un code iframe à la main dans un bloc HTML personnalisé, vérifiez qu’il ne contient pas :

• frameborder ;
• scrolling ;
• marginwidth ;
• marginheight ;
• des largeurs fixes qui cassent le mobile ;
• des permissions allow inutiles ;
• une absence de title.

Pour corriger un ancien article WordPress, cherchez simplement frameborder= dans le contenu HTML de l’article, puis supprimez l’attribut.

Trouver les vieux frameborder dans une base WordPress

Avec WP-CLI, vous pouvez repérer les articles qui contiennent encore frameborder.

wp db query "
SELECT ID, post_title
FROM wp_posts
WHERE post_status = 'publish'
AND post_content LIKE '%frameborder=%'
ORDER BY post_date DESC;
"Langage du code : PHP (php)

Si votre préfixe de table n’est pas wp_, adaptez wp_posts.

Pour voir les occurrences dans un export SQL ou un dossier de templates :

grep -RIn "frameborder" .Langage du code : JavaScript (javascript)

Évitez les remplacements massifs sans sauvegarde. Les iframes viennent souvent de fournisseurs différents, et certains embeds anciens méritent une vérification manuelle.

Remplacer automatiquement frameborder dans WordPress

Si vous avez beaucoup d’anciens articles, vous pouvez remplacer frameborder="0" dans le contenu avec WP-CLI. Faites une sauvegarde avant.

wp search-replace ' frameborder="0"' '' wp_posts --include-columns=post_content --dry-runLangage du code : PHP (php)

Si le résultat est correct, relancez sans --dry-run :

wp search-replace ' frameborder="0"' '' wp_posts --include-columns=post_contentLangage du code : PHP (php)

Vous pouvez aussi chercher les variantes avec apostrophes simples :

wp search-replace " frameborder='0'" '' wp_posts --include-columns=post_content --dry-runLangage du code : PHP (php)

Gardez toujours un œil sur les espaces. En HTML hérité, les attributs aiment se coller dans des endroits improbables. Comme les miettes dans un clavier.

Faut-il mettre border: 0 sur toutes les iframes ?

Vous pouvez le faire, mais ce n’est pas toujours idéal.

iframe {
	border: 0;
}Langage du code : CSS (css)

Cette règle est simple, mais globale. Elle s’applique à toutes les iframes : vidéos, cartes, widgets, formulaires, embeds tiers et outils spécifiques.

Une approche plus maîtrisée consiste à cibler les iframes dans vos contenus :

.entry-content iframe {
	border: 0;
}Langage du code : CSS (css)

Ou mieux, une classe dédiée aux embeds :

.embed-responsive iframe {
	border: 0;
}Langage du code : CSS (css)

Sur WordPress, la règle .entry-content iframe est souvent un bon compromis si vous voulez corriger les anciens contenus sans toucher à l’administration ou à d’autres zones du site.

Autres attributs iframe obsolètes à supprimer

frameborder n’est pas le seul attribut hérité à nettoyer. Les vieux embeds peuvent aussi contenir :

Attribut obsolète	Remplacement moderne
frameborder	border en CSS
scrolling	overflow en CSS quand c’est pertinent
marginwidth	margin ou padding en CSS
marginheight	margin ou padding en CSS
align	float, flexbox, grid ou classes CSS

La règle générale est simple : structure en HTML, présentation en CSS. Le HTML décrit le contenu. Le CSS décide de son apparence. Séparation des pouvoirs, version web.

Checklist iframe moderne

• Supprimer frameborder.
• Gérer la bordure avec border: 0; en CSS.
• Ajouter un title descriptif.
• Utiliser un wrapper responsive avec aspect-ratio pour les vidéos.
• Ajouter loading="lazy" pour les iframes hors écran.
• Limiter les permissions dans allow.
• Utiliser sandbox quand c’est compatible avec l’embed.
• Ajouter referrerpolicy si vous voulez contrôler le referrer.
• Tester sur mobile.
• Valider le HTML après correction.

Articles liés sur SkyMinds

• Iframe HTML5 : corriger l’attribut scrolling obsolète avec CSS
• WordPress : mettre à jour le code YouTube
• PageSpeed à 99 : ce que vaut vraiment un score de performance web

À retenir

L’attribut frameborder sur un élément <iframe> est obsolète. Pour corriger l’erreur HTML, supprimez simplement l’attribut et gérez la bordure en CSS.

Ancien code :

<iframe src="video.html" frameborder="0"></iframe>Langage du code : HTML, XML (xml)

Nouveau code :

<iframe src="video.html" title="Vidéo intégrée"></iframe>Langage du code : HTML, XML (xml)

CSS :

iframe {
	border: 0;
}Langage du code : CSS (css)

Profitez-en pour rendre vos iframes plus propres : responsive, accessibles, paresseusement chargées et mieux sécurisées. Corriger une erreur de validation, c’est bien. Nettoyer tout l’embed au passage, c’est mieux.

Sources

• WHATWG HTML Living Standard : fonctionnalités obsolètes et non conformes
• MDN Web Docs : élément HTML iframe
• MDN Web Docs : HTMLIFrameElement.referrerPolicy
• W3C Markup Validation Service

Report a typo