Vitrine : Page web minimaliste pour vidéo en boucle

Présentation du projet

Vitrine est un projet open source proposant une page web minimale pour afficher une vidéo en boucle, accompagnée de sous-titres défilants et de boutons interactifs. Il peut servir de vitrine, de teaser, ou de point d’entrée vers un univers, une campagne ou une démarche collective.

Objectifs du projet

Vitrine répond à trois besoins principaux :

Démonstration en ligne

Un exemple fonctionnel est accessible à l’adresse :

https://ouaisfieu.github.io/vitrine/

Caractéristiques techniques

Architecture simple

Le projet repose sur une structure minimaliste :

• index.html : Page principale avec la vidéo et les boutons
• subtitles.vtt : Fichier de sous-titres au format WebVTT
• Vidéo externe : Hébergée indépendamment

Personnalisation de la vidéo

Vidéo par défaut

La vidéo par défaut est hébergée à l’adresse :

https://dl.ouaisfi.eu/Vidéos/LAISSEZ PAC TRANQUILLE.mp4

Remplacement de la vidéo

Étapes pour personnaliser :

1. Héberger une autre vidéo en ligne (format .mp4 recommandé)
2. Mettre à jour le lien dans le fichier index.html

Gestion des sous-titres

Format WebVTT

Le fichier subtitles.vtt contient les sous-titres animés et peut être édité avec un simple éditeur de texte.

Personnalisation

Les sous-titres sont entièrement modulables :

• ⏱️ Durée : Allonger ou raccourcir l’affichage
• 📏 Espacement : Ajuster les pauses entre les blocs
• ✏️ Contenu : Modifier le texte selon le rythme souhaité

Boutons interactifs

Les boutons permettent de guider les visiteurs vers d’autres pages, outils ou espaces en lien avec la démarche portée.

Personnalisation possible :

• 📌 Intitulés : Modifier les textes des boutons
• 🔗 Liens : Changer les destinations
• 🎨 Effets : Adapter les animations et styles

Toutes ces modifications se font directement dans le fichier index.html.

Cas d’usage

Vitrine peut être utilisé dans de nombreux contextes :

1. Vitrine de projet

Présenter un projet, une initiative ou une organisation avec une vidéo d’accroche et des liens vers les ressources principales.

2. Teaser événementiel

Créer un point d’entrée visuel pour une campagne, un événement ou une mobilisation collective.

3. Page d’accueil immersive

Utiliser comme landing page minimaliste qui capte l’attention avant de rediriger vers le contenu principal.

4. Portfolio créatif

Mettre en avant un travail vidéo avec des sous-titres explicatifs et des liens vers d’autres réalisations.

Installation et déploiement

Récupération des fichiers

Les fichiers peuvent être :

• 📥 Téléchargés depuis le dépôt GitHub
• ✏️ Modifiés librement selon vos besoins
• 🌐 Utilisés sans restrictions

Hébergement

Option 1 : GitHub Pages (gratuit)

1. Forker ou dupliquer le dépôt
2. Activer GitHub Pages dans les paramètres
3. La page sera accessible à username.github.io/vitrine

Option 2 : Hébergement web classique

Déposer les fichiers sur n’importe quel serveur web supportant HTML5.

Avantages de l’approche

Autonomie technique

Simplicité d’utilisation

• Pas de base de données requise
• Pas de serveur backend nécessaire
• Modification facile avec un simple éditeur de texte
• Déploiement rapide en quelques minutes

Philosophie open source

Ressources disponibles

Fichiers du projet

• Repository GitHub : github.com/ouaisfieu/vitrine
• Démonstration live : ouaisfieu.github.io/vitrine
• Bibliothèque vidéos : dl.ouaisfi.eu/Vidéos/

Structure des fichiers

vitrine/
├── index.html          # Page principale
├── subtitles.vtt       # Fichiers de sous-titres
└── README.md           # Documentation

Personnalisation avancée

Modifier le style visuel

Le fichier index.html contient le CSS intégré. Vous pouvez personnaliser :

• 🎨 Couleurs : Palette de la page
• 🔤 Typographie : Polices des sous-titres et boutons
• 📐 Mise en page : Position des éléments
• ✨ Animations : Effets de transition

Ajouter des fonctionnalités

Le code minimaliste peut servir de base pour :

• Ajouter des boutons supplémentaires
• Intégrer des métadonnées Open Graph
• Implémenter un système de navigation
• Connecter à des outils d’analyse

Utilisation comme base

Le projet est conçu pour être utilisé tel quel ou comme point de départ pour construire une version adaptée à un autre contexte.

Adaptations possibles

• 🎓 Éducatif : Présentation de cours en vidéo
• 🎭 Artistique : Portfolio de créations audiovisuelles
• 🏢 Professionnel : Page de présentation d’entreprise
• 🌍 Militant : Campagne de sensibilisation

Licence et réutilisation

Cette approche s’inscrit dans une logique de :

• 🔓 Partage ouvert des ressources
• 🛠️ Réappropriation des outils
• 🌱 Essaimage des pratiques autonomes

Conclusion

Vitrine représente une solution élégante pour qui souhaite présenter une vidéo de manière professionnelle et autonome, sans dépendre d’infrastructures commerciales.

Le projet se distingue par :

• Sa simplicité technique : pas de complexité inutile
• Son autonomie totale : aucune dépendance externe obligatoire
• Sa flexibilité : adaptable à de nombreux contextes
• Sa philosophie libre : code ouvert et réutilisable

Repository : github.com/ouaisfieu/vitrine
Démo : ouaisfieu.github.io/vitrine
Vidéos : dl.ouaisfi.eu/Vidéos/
Licence : Libre d’utilisation