Transformez une vidéo en
fond animé au scroll
pour WordPress
Un plugin WordPress pensé pour créer des sections ou des arrière-plans de page où la vidéo avance avec le défilement. Sans GSAP dans la version destinée au dépôt WordPress.org, avec une intégration Gutenberg claire et documentée.
Créer un effet premium sans complexifier Gutenberg
L’objectif est de proposer un bloc utilisable dans l’éditeur WordPress, mais aussi un mode d’arrière-plan global de page directement accessible depuis les réglages latéraux de Gutenberg.
Bloc section Gutenberg
Une section pleine largeur pouvant contenir des blocs internes : titres, textes, boutons, colonnes, groupes, images ou tout autre bloc compatible Gutenberg.
Fond de page complet
Un mode page entière configurable depuis la barre latérale de la page, sans devoir insérer un bloc spécial au début du contenu.
Réglages simples
Sélection de vidéo depuis la médiathèque, URL directe, overlay, opacité, vitesse de scroll, marges verticales, hauteur minimale et comportement responsive.
Un plugin orienté production
La priorité est de garder un plugin propre, compréhensible, compatible avec le dépôt officiel WordPress.org et suffisamment documenté pour éviter les mauvaises configurations.
Éditeur Gutenberg
- Bloc section avec InnerBlocks
- Alignement pleine largeur
- Réglage des marges haut et bas
- Hauteur minimale configurable
- Overlay sombre ou coloré
Réglages de page
- Panneau latéral dédié dans Gutenberg
- Option “Scroll Video Background Page”
- Sélection via la médiathèque WordPress
- Activation page par page
- Compatibilité thème Full Site Editing
Version WordPress.org
- Code JavaScript sans dépendance GSAP
- Fichiers en anglais
- Text domain propre
- Internationalisation prête
- Documentation intégrée au plugin
Deux façons d’utiliser Scroll Video Background
Le plugin doit couvrir deux usages distincts : une section Gutenberg indépendante et un arrière-plan de page complet.
Mode section Gutenberg
- Ajouter le bloc “Scroll Video Background Section”.
- Sélectionner une vidéo depuis la médiathèque.
- Définir hauteur, marges verticales et overlay.
- Ajouter du contenu à l’intérieur du bloc.
- Publier la page.
Mode fond de page complet
- Ouvrir la page dans Gutenberg.
- Utiliser le panneau latéral “Scroll Video Background Page”.
- Activer le fond vidéo pour cette page.
- Sélectionner la vidéo dans la médiathèque.
- Construire la page normalement avec Gutenberg.
Une bonne vidéo est courte, légère et bien encodée
La qualité de l’effet dépend fortement de la préparation du fichier vidéo. Les keyframes sont essentielles pour obtenir un scroll précis.
Spécifications conseillées
Rôle des keyframes
Une keyframe est une image complète dans la vidéo. Pour un effet contrôlé par le scroll, le navigateur doit pouvoir se déplacer rapidement et précisément dans le fichier.
- Keyframe toutes les 0,5 seconde pour un bon compromis.
- Keyframe toutes les 0,25 seconde pour plus de précision.
- Fichier plus lourd si les keyframes sont très rapprochées.
- Scroll moins fluide si les keyframes sont trop éloignées.
Préparer une vidéo optimisée pour le scroll
FFmpeg permet de convertir la vidéo, supprimer l’audio, réduire le poids du fichier et forcer des keyframes régulières.
Ouvrir PowerShell ou Windows Terminal
Utiliser le terminal Windows pour installer FFmpeg et exécuter les commandes d’optimisation vidéo.
Installer FFmpeg
Exécuter la commande suivante, puis fermer et rouvrir le terminal.
winget install --id Gyan.FFmpeg -eVérifier l’installation
La commande doit afficher la version installée de FFmpeg.
ffmpeg -versionPréparer le dossier de travail
Placer la vidéo originale dans un dossier simple, par exemple C:\Videos\scroll-video, puis ouvrir ce dossier dans PowerShell.
cd C:\Videos\scroll-videoCommande recommandée
ffmpeg -i "video-originale.mp4" -vf "scale=1920:-2,fps=30" -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.5)" "video-scroll-optimisee.mp4"Version haute fluidité
Keyframes toutes les 0,25 seconde. Meilleure précision, fichier potentiellement plus lourd.
Version légère
Résolution 1280 px et compression plus forte. Meilleure performance, qualité visuelle plus réduite.
ffmpeg -i "video-originale.mp4" -vf "scale=1920:-2,fps=30" -an -c:v libx264 -preset slow -crf 22 -pix_fmt yuv420p -movflags +faststart -g 8 -keyint_min 8 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.25)" "video-scroll-haute-fluidite.mp4"ffmpeg -i "video-originale.mp4" -vf "scale=1280:-2,fps=30" -an -c:v libx264 -preset slow -crf 26 -pix_fmt yuv420p -movflags +faststart -g 15 -keyint_min 15 -sc_threshold 0 -force_key_frames "expr:gte(t,n_forced*0.5)" "video-scroll-legere.mp4"Une base propre pour publication, traduction et évolutions
Le plugin est conçu pour être publié sur le dépôt officiel, documenté en anglais, puis traduit via le système officiel des Polyglots WordPress.
Documentation intégrée
- Page principale dans le menu WordPress
- Lien direct depuis la page des extensions
- Guide de préparation vidéo
- Exemples FFmpeg
Conformité plugin
- Plugin URI et Author URI distincts
- Text domain conforme
- Sanitization et escaping
- Pas de dépendance externe obligatoire
Évolutions possibles
- Version GSAP séparée
- Réglages avancés de scrub
- Presets visuels
- Appel aux dons sur le site Etchenet
Un plugin WordPress pour créer des pages plus immersives
Le plugin permet d’utiliser une vidéo comme fond animé synchronisé au scroll, avec une configuration pensée pour Gutenberg, les thèmes Full Site Editing et une publication propre sur WordPress.org.
