Comment rendre une iframe vidéo responsive
Mis à jour : 10 novembre 2026
Une iframe avec width="560" height="315" s’affiche bien sur ordinateur, mais sur téléphone elle déborde ou devient minuscule. La solution : lui faire occuper toute la largeur disponible et calculer sa hauteur à partir des proportions de la vidéo.
La méthode moderne : aspect-ratio
width:100% lui fait occuper son conteneur et aspect-ratio calcule la hauteur. Cela fonctionne dans tous les navigateurs actuels. Pour les vidéos verticales, utilisez 9/16 et limitez la largeur (par exemple max-width:360px).
<iframe src="https://dembed.cc/embed/v_VOTRE_ID" title="Ma vidéo" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>L’astuce classique (pour les très vieux navigateurs)
56,25 % correspond à 9 ÷ 16 : le conteneur réserve une hauteur proportionnelle à sa largeur et l’iframe la remplit. Pour du 4:3, utilisez 75 % ; pour du 1:1, 100 %.
<div style="position:relative;padding-top:56.25%">
<iframe src="https://dembed.cc/embed/v_VOTRE_ID" title="Ma vidéo" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>Sans écrire de code
- 1Ouvrez le générateur de code d’intégration et collez le lien de votre vidéo.
- 2Choisissez les proportions (16:9, 4:3, 1:1 ou 9:16) et « Responsive » comme taille.
- 3Copiez le code et collez-le sur votre site.
Les erreurs courantes
- Garder des width et height fixes sur l’iframe en plus du style : supprimez-les, sinon le navigateur risque d’ignorer le style.
- Un conteneur à largeur fixe en pixels : l’iframe s’adapte à son conteneur, qui doit donc être flexible lui aussi.
- Oublier allowfullscreen : le bouton plein écran ne fonctionnera pas.
Questions fréquentes
Oui : collez le code dans un bloc « HTML personnalisé ».