Si, au détour d’une validation HTML de votre page, vous obtenez l’erreur suivante :
The scrolling attribute on the iframe element is obsolete. Use CSS instead.
… c’est que votre code contient un élément <iframe> avec un attribut scrolling.
Exemple classique :
<iframe src="https://example.com" scrolling="no"></iframe>Langage du code : HTML, XML (xml)Cet attribut était utilisé pour indiquer si l’iframe devait afficher une barre de défilement. En HTML moderne, il est obsolète. Le standard HTML classe bien scrolling sur iframe parmi les fonctionnalités obsolètes, et les validateurs recommandent d’utiliser CSS à la place.
Le problème : l’attribut scrolling sur iframe
On trouvait souvent ce genre de code dans les anciennes intégrations :
<iframe
src="https://example.com/embed"
width="600"
height="400"
scrolling="no"
frameborder="0"
></iframe>Langage du code : HTML, XML (xml)Le validateur HTML signale alors une erreur, car scrolling ne fait plus partie des attributs conformes pour <iframe>. En clair, le navigateur peut encore l’interpréter par compatibilité, mais le code n’est plus valide.
La première correction consiste donc à supprimer l’attribut :
<iframe
src="https://example.com/embed"
width="600"
height="400"
></iframe>Langage du code : HTML, XML (xml)Mais cela ne suffit pas toujours à reproduire exactement l’ancien comportement. C’est là que CSS entre en scène.
Remplacer scrolling par CSS
L’idée générale est de gérer l’affichage avec CSS plutôt qu’avec un attribut HTML de présentation.
On peut commencer avec une classe CSS dédiée :
<iframe
class="embed-frame"
src="https://example.com/embed"
title="Contenu intégré"
></iframe>Langage du code : HTML, XML (xml)Puis le CSS :
.embed-frame {
width: 100%;
height: 400px;
border: 0;
overflow: hidden;
}Langage du code : CSS (css)Cette règle est plus propre que l’ancien scrolling="no", mais il faut connaître sa limite : overflow appliqué à l’élément iframe contrôle surtout la boîte de l’iframe dans la page parente. Il ne donne pas toujours un contrôle total sur le scroll du document chargé à l’intérieur.
Si l’iframe charge une page externe que vous ne contrôlez pas, par exemple une carte, un widget, un formulaire tiers ou un ancien embed, vous ne pourrez pas toujours supprimer le scroll interne avec le CSS de votre page. La frontière de l’iframe existe justement pour isoler les documents. Pratique pour la sécurité, agaçant pour les petits ajustements CSS.
Cas 1 : vous contrôlez le contenu de l’iframe
Si l’iframe charge une page de votre propre site, vous pouvez gérer le scroll depuis le document intégré lui-même.
Un projet WordPress en tête ?
Vous avez une idée claire de ce que vous voulez, mais pas les ressources en interne pour le faire bien. Je développe des sites et extensions WordPress sur-mesure — sans délais à rallonge ni mauvaises surprises.
Décrivez-moi votre projet →Dans la page parente :
<iframe
class="embed-frame"
src="/iframe-content.html"
title="Exemple de contenu intégré"
></iframe>Langage du code : HTML, XML (xml)CSS de la page parente :
.embed-frame {
width: 100%;
height: 400px;
border: 0;
}Langage du code : CSS (css)Dans la page chargée dans l’iframe, vous pouvez ensuite écrire :
html,
body {
overflow: hidden;
}Langage du code : CSS (css)Là, vous contrôlez réellement le document interne. C’est le cas le plus propre.
Cas 2 : vous ne contrôlez pas le contenu de l’iframe
Si l’iframe charge un site externe, vous ne pouvez pas toujours supprimer les barres de défilement internes. Votre CSS ne traverse pas librement la frontière de l’iframe.
Dans ce cas, la meilleure solution consiste souvent à donner une hauteur suffisante à l’iframe :
.embed-frame {
width: 100%;
min-height: 500px;
border: 0;
}Langage du code : CSS (css)Ou à adapter la hauteur selon le viewport :
.embed-frame {
width: 100%;
height: min(70vh, 720px);
border: 0;
}Langage du code : CSS (css)Si le service externe fournit un paramètre d’intégration pour masquer certaines zones, utilisez-le plutôt qu’un hack CSS. Les embeds YouTube, Google Maps, Calendly, Typeform ou autres ont souvent leurs propres options. Autant négocier avec l’API plutôt que de se battre contre une iframe.
Solution avec un wrapper responsive
Pour les vidéos, cartes et contenus embarqués, le problème n’est pas seulement le scroll. Il faut aussi gérer le responsive.
Voici une structure propre :
<div class="responsive-embed">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Titre de la vidéo"
loading="lazy"
allowfullscreen
></iframe>
</div>Langage du code : HTML, XML (xml)Et le CSS moderne avec aspect-ratio :
.responsive-embed {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.responsive-embed iframe {
width: 100%;
height: 100%;
border: 0;
}Langage du code : CSS (css)Cette approche remplace avantageusement les vieux attributs de présentation. Le wrapper contrôle le ratio, l’iframe remplit l’espace, et le code reste valide.
Ajouter un titre à l’iframe
Tant qu’à corriger l’iframe, ajoutez aussi un attribut title. Il décrit le contenu intégré pour les technologies d’assistance.
<iframe
src="https://example.com/embed"
title="Carte d’accès au magasin"
></iframe>Langage du code : HTML, XML (xml)MDN indique que l’attribut title sur une iframe doit décrire le contenu embarqué, afin que les utilisateurs de lecteurs d’écran puissent comprendre à quoi sert le cadre.
Évitez les titres vagues comme iframe, embed ou contenu. Préférez :
Vidéo de présentation de Wine sous Linux;Carte Google Maps du cabinet;Formulaire de réservation Calendly;Lecteur audio de l’épisode 12.
Supprimer aussi frameborder
Les vieux embeds contiennent souvent plusieurs attributs obsolètes en même temps :
<iframe
src="https://example.com/embed"
scrolling="no"
frameborder="0"
allowtransparency="true"
></iframe>Langage du code : HTML, XML (xml)On peut nettoyer ainsi :
<iframe
class="embed-frame"
src="https://example.com/embed"
title="Contenu intégré"
></iframe>Langage du code : HTML, XML (xml)Et déplacer la présentation dans CSS :
.embed-frame {
width: 100%;
height: 400px;
border: 0;
background: transparent;
}Langage du code : CSS (css)Même logique : le HTML décrit le contenu, le CSS gère l’apparence.
Ajouter loading= »lazy » pour les iframes non critiques
Si l’iframe n’est pas immédiatement visible au-dessus de la ligne de flottaison, vous pouvez ajouter loading="lazy".
<iframe
src="https://example.com/embed"
title="Contenu intégré"
loading="lazy"
></iframe>Langage du code : HTML, XML (xml)L’attribut loading permet de différer le chargement d’une iframe hors écran, ce qui peut améliorer les performances initiales d’une page contenant des embeds lourds. MDN documente bien loading sur l’élément iframe.
Je l’éviterais seulement pour une iframe critique visible immédiatement, par exemple une application embarquée indispensable dès le premier écran.
Penser à sandbox si l’iframe charge un contenu tiers
Si vous intégrez un contenu externe non totalement maîtrisé, l’attribut sandbox peut limiter ce que l’iframe a le droit de faire.
<iframe
src="https://example.com/embed"
title="Widget externe"
sandbox
></iframe>Langage du code : HTML, XML (xml)Cette version est très restrictive. En pratique, il faut souvent autoriser certaines capacités :
<iframe
src="https://example.com/embed"
title="Widget externe"
sandbox="allow-scripts allow-forms allow-same-origin"
></iframe>Langage du code : HTML, XML (xml)MDN documente l’attribut sandbox sur iframe comme un mécanisme permettant d’appliquer des restrictions supplémentaires au contenu intégré.
Attention toutefois : certains embeds ne fonctionneront pas avec un sandbox trop strict. Testez toujours le rendu réel après modification.
Exemple complet et valide
Voici un exemple plus moderne et propre pour une iframe responsive :
<div class="responsive-embed">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Vidéo de présentation"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>Langage du code : HTML, XML (xml)Avec le CSS associé :
.responsive-embed {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
}
.responsive-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}Langage du code : CSS (css)Cette version supprime scrolling, évite frameborder, ajoute un title, améliore le responsive et garde la présentation dans le CSS.
Cas WordPress : corriger les embeds dans le contenu
Dans WordPress, les iframes peuvent venir de plusieurs endroits : contenu d’article, bloc HTML personnalisé, oEmbed, shortcode, plugin, constructeur de page ou widget tiers.
Si vous avez encore des iframes avec scrolling="no" dans les contenus, le plus propre consiste à corriger les embeds à la source.
Pour trouver les contenus concernés avec WP-CLI :
wp db query "
SELECT ID, post_title, post_type
FROM wp_posts
WHERE post_content LIKE '%scrolling=%'
AND post_status NOT IN ('trash', 'auto-draft');
"Langage du code : PHP (php)Ensuite, corrigez manuellement les contenus, ou faites une recherche-remplacement prudente si le motif est parfaitement maîtrisé.
Exemple pour supprimer uniquement scrolling="no" :
wp search-replace ' scrolling="no"' '' wp_posts --include-columns=post_content --dry-runLangage du code : PHP (php)Si le dry-run semble correct :
wp search-replace ' scrolling="no"' '' wp_posts --include-columns=post_contentLangage du code : PHP (php)Je conseille fortement de faire une sauvegarde de base de données avant ce genre d’opération. Une recherche-remplacement SQL réussit toujours exactement ce qu’on lui demande. Même quand on lui demande une bêtise.
Cas WordPress : filtrer le rendu des iframes
Si un plugin injecte encore l’attribut scrolling, vous pouvez filtrer le contenu au rendu. Ce n’est pas aussi propre que corriger la source, mais cela peut dépanner.
Voici un petit snippet compatible PHP 8.3+ qui supprime les attributs scrolling des iframes dans le contenu des articles :
<?php
/**
* Plugin Name: SKY Remove Obsolete Iframe Scrolling Attribute
* Description: Removes obsolete scrolling attributes from iframe elements in post content.
* Author: Matt Biscay
* Version: 1.0.0
*/
declare(strict_types=1);
defined( 'ABSPATH' ) || exit;
add_filter( 'the_content', 'sky_remove_obsolete_iframe_scrolling_attribute', 20 );
/**
* Remove obsolete scrolling attributes from iframe elements.
*
* @param string $content Post content.
* @return string Filtered content.
*/
function sky_remove_obsolete_iframe_scrolling_attribute( string $content ): string {
if ( ! str_contains( $content, '<iframe' ) || ! str_contains( $content, 'scrolling=' ) ) {
return $content;
}
return preg_replace(
'/\s+scrolling=(["\'])(?:auto|yes|no)\1/i',
'',
$content
) ?: $content;
}Langage du code : PHP (php)Pour une correction simple et ciblée, cette regex suffit souvent. Pour un nettoyage HTML plus complet, mieux vaut utiliser un parseur HTML comme DOMDocument, surtout si vous devez manipuler plusieurs attributs.
Peut-on vraiment remplacer scrolling= »no » par overflow: hidden ?
Oui, mais avec une nuance importante.
Pour le validateur HTML, la correction consiste à retirer l’attribut scrolling et à utiliser CSS. Cependant, le comportement exact dépend de ce que vous contrôlez.
- Si vous contrôlez le document dans l’iframe, mettez
overflow: hiddendans ce document. - Si vous ne contrôlez pas le document, ajustez plutôt la hauteur de l’iframe.
- Si l’iframe est une vidéo, utilisez un wrapper avec
aspect-ratio. - Si l’iframe vient d’un service tiers, cherchez d’abord une option d’embed officielle.
Donc cette correction :
<iframe style="overflow: hidden;"></iframe>Langage du code : HTML, XML (xml)peut supprimer l’erreur de validation si vous avez supprimé scrolling, mais elle ne garantit pas toujours la disparition du scroll interne.
La version plus propre reste :
<iframe
class="embed-frame"
src="https://example.com/embed"
title="Contenu intégré"
></iframe>Langage du code : HTML, XML (xml).embed-frame {
width: 100%;
height: 400px;
border: 0;
overflow: hidden;
}Langage du code : CSS (css)Mémo rapide
<!-- Ancien code non conforme HTML moderne. -->
<iframe
src="https://example.com/embed"
scrolling="no"
></iframe>
<!-- Version corrigée. -->
<iframe
class="embed-frame"
src="https://example.com/embed"
title="Contenu intégré"
></iframe>
<!-- CSS. -->
.embed-frame {
width: 100%;
height: 400px;
border: 0;
overflow: hidden;
}
<!-- Version responsive. -->
<div class="responsive-embed">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Vidéo intégrée"
loading="lazy"
allowfullscreen
></iframe>
</div>
.responsive-embed {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.responsive-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}Langage du code : HTML, XML (xml)Conclusion
L’erreur The scrolling attribute on the iframe element is obsolete. Use CSS instead. se corrige d’abord en supprimant l’attribut scrolling de vos iframes.
Ensuite, utilisez CSS pour gérer l’affichage :
.embed-frame {
overflow: hidden;
}Langage du code : CSS (css)Mais gardez en tête que le scroll interne d’une iframe dépend souvent du document chargé à l’intérieur. Si vous contrôlez ce document, appliquez overflow: hidden sur son html et son body. Si vous ne le contrôlez pas, ajustez la hauteur, utilisez les options d’intégration du service tiers, ou acceptez le scroll si le contenu en a besoin.
Tant que vous corrigez l’iframe, profitez-en pour ajouter un title, retirer les anciens attributs comme frameborder, ajouter loading="lazy" si l’embed n’est pas critique, et utiliser un wrapper responsive. Une petite validation HTML peut parfois servir de prétexte à un vrai nettoyage. Pour une fois, le validateur ne râle pas pour rien.
Un projet WordPress en tête ?
Vous avez une idée claire de ce que vous voulez, mais pas les ressources en interne pour le faire bien. Je développe des sites et extensions WordPress sur-mesure — sans délais à rallonge ni mauvaises surprises.
Décrivez-moi votre projet →
