Comment intégrer une vidéo en HTML : l’iframe responsive pas à pas

Il existe deux façons d’insérer une vidéo en HTML. La balise <video> lit un fichier (un MP4, par exemple) directement depuis votre serveur : c’est simple, mais le fichier est servi tel quel, sans qualité adaptative ni statistiques, et il consomme la bande passante de votre hébergement.

Une iframe intègre le lecteur d’un service vidéo. Le fichier est servi par ce service, avec qualité adaptative, sous-titres et commandes, et sur votre site vous ne collez qu’une ligne de code. C’est ce que YouTube, Vimeo ou Dembed proposent comme « code d’intégration ».

Avec la propriété CSS aspect-ratio, prise en charge par tous les navigateurs modernes, l’iframe occupe la largeur disponible et calcule sa propre hauteur, sans conteneur supplémentaire :

<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; encrypted-media" allowfullscreen loading="lazy"></iframe>

Si votre thème est ancien ou si l’éditeur supprime les styles, utilisez l’astuce du conteneur : padding-top: 56.25% correspond au format 16:9 (9 ÷ 16). C’est le format que copie le bouton « Responsive » du tableau de bord Dembed :

<div style="position:relative;width:100%;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; encrypted-media" allowfullscreen loading="lazy"></iframe></div>

• src : l’adresse du lecteur. Sur Dembed, elle a la forme https://dembed.cc/embed/ID.
• title : décrit la vidéo pour les lecteurs d’écran. C’est une exigence d’accessibilité et cela aide le SEO.
• allow : les autorisations du lecteur (lecture automatique, plein écran, image dans l’image). Sans elles, certains boutons ne fonctionnent pas.
• allowfullscreen : active le bouton plein écran.
• loading="lazy" : l’iframe ne se charge que lorsque le visiteur s’en approche. Améliore la vitesse et les Core Web Vitals.
• style="border:0" : supprime la bordure grise que les navigateurs ajoutent par défaut aux iframes.

Les navigateurs n’autorisent la lecture automatique que si la vidéo démarre sans le son. Sur Dembed, vous l’activez en ajoutant ?autoplay=1 à la fin de l’adresse d’intégration.

Pour les vidéos verticales (Reels, Shorts, TikTok), passez le format en 9/16 et limitez la largeur pour qu’elle n’envahisse pas l’écran sur ordinateur :

<iframe src="https://dembed.cc/embed/v_VOTRE_ID?autoplay=1" title="Ma vidéo verticale" style="width:100%;max-width:360px;aspect-ratio:9/16;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>

• Votre propre HTML : collez-le là où la vidéo doit apparaître, dans le <body>.
• WordPress : dans un bloc « HTML personnalisé » (nous avons un guide pas à pas).
• Blogger : dans la « Vue HTML » de l’article ou dans un gadget HTML/JavaScript.
• Wix, Webflow, Squarespace, Shopify et autres constructeurs : si votre plateforme a un bloc « HTML », « Intégrer » ou « Code personnalisé », collez-y l’iframe.

• La vidéo ne s’affiche pas et a une hauteur nulle : il manque le format. Utilisez aspect-ratio ou le conteneur avec padding-top.
• « Contenu bloqué » ou « contenu mixte » : votre site est en https et l’iframe en http. Utilisez toujours l’adresse en https.
• « Ce site n’autorise pas l’intégration » : certains services bloquent les iframes sur d’autres sites (en-têtes X-Frame-Options ou frame-ancestors). Utilisez le lien d’intégration officiel du service, pas la page normale de la vidéo.
• L’éditeur supprime le code : passez en vue HTML ou utilisez un bloc HTML personnalisé ; les éditeurs visuels retirent parfois les iframes.