Mettre une vidéo transparente sur un site web

Peut-on afficher une vidéo transparente sur une page web ?

Oui, avec la balise video et un fichier qui garde la transparence. Le WebM en VP9 avec alpha marche dans Chrome, Edge et Firefox ; pour Safari, on ajoute en général une vidéo HEVC avec alpha.

Un MP4 H.264 ne convient pas : il afficherait un fond opaque. Les détails des formats sont dans le WebM transparent.

Comment préparer les fichiers à partir de Keyotte ?

Keyotte te donne un MP4 sur fond vert uni, pas un fichier transparent. Tu retires le vert dans ton logiciel de montage, puis tu exportes un fichier avec alpha, comme un ProRes 4444, qui sert de source aux conversions.

Garde la séquence courte et la taille adaptée à l'affichage : une vidéo de fond de page n'a pas besoin du 1080p sur mobile.

Comment écrire la balise vidéo ?

Mets les deux sources dans une seule balise video, la version Safari d'abord, puis le WebM. Le navigateur prend la première qu'il sait lire.

Pour la lecture automatique, les navigateurs exigent une vidéo muette : ajoute muted, autoplay, loop et playsinline (ce dernier évite le plein écran sur iPhone).

• Source 1 : fichier HEVC avec alpha, type video/mp4 avec le codec hvc1.
• Source 2 : fichier WebM VP9 avec alpha, type video/webm.
• Attributs : muted, autoplay, loop, playsinline.
• Une image fixe (poster) pour l'affichage avant lecture.

Comment vérifier que la transparence fonctionne ?

Teste la page dans Chrome, Firefox et Safari, sur ordinateur et sur téléphone, avec un fond de page coloré. Si tu vois un rectangle noir dans un navigateur, sa source n'a pas d'alpha ou n'a pas été choisie.

Les causes habituelles du noir sont listées dans vidéo transparente qui devient noire.

Y a-t-il une solution plus simple ?

Oui, si le décor de la page est fixe : pose le sujet sur ce décor au montage et publie un MP4 classique. Tu perds l'effet « sans cadre », mais la vidéo est lue partout.

Pour un petit élément animé, un WebP animé peut suffire ; voir le GIF à fond transparent et ses alternatives.

Quelles alternatives à la vidéo transparente sur un site ?

Si l'effet doit seulement rester discret, une vidéo classique avec un décor de la même couleur que la page fait illusion. Il suffit de poser le sujet sur un fond uni identique à celui du site au montage.

L'astuce marche tant que la page n'a pas de motif ni de dégradé derrière la vidéo. C'est souvent le choix le plus léger et le plus compatible, y compris sur les vieux navigateurs.