Vidéos HTML et iframes intégrées qui chargent vite

Générateur de code d'intégration vidéo et iframe HTML

Vidéo et iframe HTML : autoplay, sous-titres, intégrations responsives | We.Inc

Comment utiliser la balise video (autoplay, muted, playsinline, poster), ajouter des sous-titres avec track, créer une vidéo d'arrière-plan pour le hero, intégrer YouTube ou Vimeo de façon responsive et différée, avec un générateur de code d'intégration.

Pour vos propres fichiers, utilisez l'élément video : <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. L'autoplay ne fonctionne qu'avec muted. Pour YouTube ou Vimeo, utilisez une iframe avec loading="lazy", un title et aspect-ratio: 16 / 9 pour un dimensionnement responsive. Le générateur ci-dessous écrit l'un ou l'autre pour vous.

Les attributs vidéo dont vous aurez besoin

Attribut
Effet

Affiche les commandes du navigateur : lecture, volume et plein écran

autoplay muted
Lance la lecture au chargement ; la plupart des navigateurs exigent muted pour cela

Lit la vidéo dans la page sur iPhone au lieu du plein écran

Redémarre à la fin

Image affichée avant le début de la lecture

none, metadata ou auto : quantité de données à récupérer à l'avance

Choisissez une source dans le générateur, activez les options et copiez un code qui contient déjà les attributs qu'on oublie : playsinline pour les iPhone, un title sur l'iframe pour les lecteurs d'écran, le mode YouTube à confidentialité renforcée et un cadre 16:9 qui ne s'écrase jamais. Les sections ci-dessous couvrent les sous-titres, les vidéos d'arrière-plan, le sandbox et une façade à charger au clic qui tient les lecteurs lourds à l'écart du premier affichage.

Choisissez YouTube, Vimeo, un fichier auto-hébergé ou toute autre URL d'iframe.
Collez l'ID de la vidéo ou le chemin du fichier, puis choisissez autoplay, boucle, commandes et temps de départ.
Laissez le mode responsive et le chargement différé activés, sauf si vous avez une raison de les désactiver.
Copiez le code et collez-le dans votre page ou dans le bloc HTML de votre créateur de site.

Donnez à chaque iframe un attribut title qui décrit son contenu. Les lecteurs d'écran l'annoncent quand l'utilisateur atteint le cadre.
Mettez preload="none" sur les vidéos situées loin dans la page, ou preload="metadata" si vous voulez afficher la durée sans télécharger le clip.
Réencodez les vidéos d'arrière-plan sans piste audio. Un flux silencieux est plus léger et rend l'exigence de muted sans objet.
Une iframe avec loading="lazy" déjà visible sur le premier écran se charge quand même immédiatement, donc l'attribut est sans risque sur presque tous les cadres.
Proposez toujours des commandes ou un bouton pause visible pour tout mouvement qui dure plus de cinq secondes, comme le demande le critère WCAG 2.2.2.

Questions fréquentes

Pourquoi ma vidéo ne se lance-t-elle pas automatiquement ?

Les navigateurs bloquent l'autoplay avec le son. Ajoutez muted avec autoplay, et playsinline pour les iPhone. Les modes économie de données et certains réglages utilisateur peuvent quand même le bloquer, donc concevez la page pour qu'elle fonctionne avec la seule image poster.

Comment rendre une intégration YouTube responsive ?

Supprimez la largeur et la hauteur fixes et donnez à l'iframe width: 100%; height: auto; aspect-ratio: 16 / 9. La propriété aspect-ratio maintient la hauteur proportionnelle à la largeur sur toutes les tailles d'écran, et remplace l'ancien conteneur avec padding-bottom: 56.25%.

À quoi sert youtube-nocookie.com ?

C'est le mode de confidentialité renforcée de YouTube. Selon YouTube, les informations de visionnage ne servent pas à personnaliser la navigation du visiteur tant qu'il ne lance pas la vidéo. Pour le reste, l'intégration fonctionne de la même façon ; remplacez simplement le domaine dans le src.

À quoi sert l'attribut sandbox d'une iframe ?

Un attribut sandbox vide applique toutes les restrictions : pas de scripts, pas de formulaires, pas de popups, pas de navigation de la page parente et une origine unique. Vous ne rajoutez ensuite que ce dont le cadre a besoin avec des jetons comme allow-scripts ou allow-forms. Évitez de combiner allow-scripts et allow-same-origin pour du contenu non fiable.

Comment ajouter des sous-titres à une vidéo ?

Écrivez un fichier WebVTT avec des repères minutés et ajoutez <track kind="captions" src="captions.vtt" srclang="en" label="English" default> dans l'élément video. Le navigateur ajoute un menu de sous-titres à ses commandes. Le fichier doit être servi depuis la même origine ou avec CORS.

Pourquoi une façade vaut mieux qu'un lecteur intégré brut

Une iframe YouTube ou Vimeo charge ses propres scripts, styles et polices dès son affichage, avant que quiconque appuie sur lecture. Sur une page avec plusieurs intégrations, ce poids retombe sur chaque visiteur, alors que la plupart ne regardent jamais la vidéo.
Une façade affiche la miniature et un bouton lecture, et ne remplace le tout par la vraie iframe qu'au clic. Lighthouse classe ce modèle dans son audit des façades tierces. Le code ci-dessous le fait en quelques lignes, sans bibliothèque.

Une vidéo d'arrière-plan pour le hero, faite avec soin

Gardez le clip court, silencieux et compressé, définissez un poster pour que quelque chose s'affiche tout de suite, et placez le texte sur un calque sombre pour que le contraste ne dépende pas de l'image. Masquez la vidéo pour les visiteurs qui demandent moins d'animations et laissez le poster porter le design.

L'élément video

Un clip produit avec plusieurs sources et un poster

Le navigateur lit la première source qu'il prend en charge, donc placez en premier le format le plus léger et le plus récent. Le paragraphe à l'intérieur ne s'affiche que dans les navigateurs sans aucune prise en charge de la vidéo.

Sous-titres avec track et WebVTT

Associer des fichiers de sous-titres

kind="captions" inclut les effets sonores et le nom des intervenants ; kind="subtitles" sert à la traduction. default active le premier.

Le fichier commence par WEBVTT, puis viennent des repères avec une heure de début et de fin suivies du texte. Servez-le avec le type de contenu text/vtt.

Vidéo d'arrière-plan pour le hero, avec solution de repli

Hero muet en boucle, avec repli pour la réduction des animations

Le poster et l'arrière-plan du hero partagent une même image, donc le hero s'affiche correctement avant le chargement de la vidéo et quand elle est masquée pour réduire les animations.

Les attributs d'iframe qui comptent

Attributs d'iframe et quand les utiliser

Attribut
Exemple
Rôle

title="Store location map"
Nom accessible du cadre

loading="lazy"
Diffère les cadres hors écran jusqu'à ce que l'utilisateur s'en approche en faisant défiler

sandbox="allow-scripts allow-forms"
Limite ce que la page intégrée peut faire

allow="autoplay; fullscreen; picture-in-picture"
Accorde des fonctionnalités du navigateur au cadre

Permet au lecteur de passer en plein écran (ancien équivalent de allow="fullscreen")

referrerpolicy="strict-origin-when-cross-origin"
Limite ce que le site intégré apprend de l'URL de la page

width / height
width="560" height="315"
Réserve l'espace avant le chargement ; à surcharger en CSS

Intégration YouTube responsive en 16:9

aspect-ratio garde les proportions du cadre à toutes les largeurs. Le domaine nocookie correspond au mode de confidentialité renforcée de YouTube.

Un widget tiers dans un sandbox

Seuls les scripts et l'envoi de formulaires sont réautorisés. Le cadre ne peut ni ouvrir de popups ni faire naviguer votre page.

Façade YouTube à charger au clic

La miniature d'abord, le lecteur au clic

Tant que personne ne clique, la page charge une seule miniature au lieu du lecteur complet. Le bouton le garde accessible au clavier.

Formats et budget de poids

Formats vidéo pour le web (vérifiez sur caniuse les versions exactes utilisées par votre public)

Conteneur et codec
Prise en charge
À utiliser pour

MP4, vidéo H.264, audio AAC
Tous les grands navigateurs actuels
Le choix par défaut sûr et la source de repli

WebM, VP9
Tous les grands navigateurs actuels
Des fichiers plus légers à qualité similaire ; à placer avant MP4

MP4 ou WebM, AV1
Versions récentes des grands navigateurs ; vérifiez sur caniuse
Les fichiers les plus légers, mais un encodage plus lent

GIF animé
Partout
À éviter au-delà d'une ou deux secondes ; un MP4 muet est bien plus léger

Compresser un clip de hero avec ffmpeg

Nos objectifs de travail : 720p ou 1080p, sans audio, moins de dix secondes et quelques mégaoctets au maximum. -an supprime l'audio, -movflags +faststart permet de commencer la lecture avant la fin du téléchargement du fichier.

Fichier vidéo

Autre iframe

Générateur de code d'intégration

Source

ID ou URL de la vidéo

Chemin du fichier vidéo

URL de l'iframe

Titre (lu par les lecteurs d'écran)

Image poster (facultatif)

Démarrer à (secondes)

Lecture automatique (muette)

Boucle

Commandes

Ne pas suivre (dnt=1)

Confidentialité renforcée (nocookie)

Chargement différé

Responsive 16:9

Sandbox

Animation en lecture automatique sans commandes : ajoutez votre propre bouton pause pour que les visiteurs puissent l'arrêter.