Fausse page de plateforme vidéo — un tutoriel de pétanque qui n'existe pas. La vidéo « charge » pendant ~5 secondes, se bloque à 48 % comme une vraie connexion pourrie, puis votre média apparaît dans le cadre du lecteur, comme si la vidéo avait fini par charger.
Rien d'autre ne bouge : l'en-tête, le titre, les commentaires et les suggestions restent en place, et la barre de contrôle passe en mode lecture (icône pause, compteur qui avance, barre qui progresse). C'est ce qui rend le gag sournois — on croit vraiment que le tuto démarre.
Un seul fichier HTML, aucune dépendance, aucun build, aucune ressource distante : les miniatures et les boules sont dessinées en CSS, la page s'affiche même hors ligne.
Déposez votre fichier dans media/. La page essaie ces noms dans cet
ordre et garde le premier qui charge :
| Fichier | Comportement |
|---|---|
media/prank.gif |
le GIF final — sans son, c'est normal |
media/prank.mp4 |
si vous préférez une vidéo : son possible |
media/prank.webm |
source secondaire (optionnelle) |
media/jon-hamm.mp4 |
ancien nom, conservé pour ne rien casser |
Si aucun n'est trouvé, la page affiche un message d'aide au lieu de rester
noire. Voir media/PLACEZ-LE-MEDIA-ICI.txt pour les commandes ffmpeg.
Le média est préchargé pendant le faux chargement : au moment de la bascule il est déjà en cache, donc il apparaît sans le moindre à-coup. Gardez-le sous ~5 Mo pour que ça tienne dans les 5 secondes.
Le cadrage est celui du lecteur : un média vertical garde ses bandes noires sur les côtés, exactement comme une vidéo portrait sur le vrai site. Rien à régler, c'est automatique.
Si la cible a fait défiler la page jusqu'aux commentaires, elle est ramenée sur le lecteur juste avant la bascule — sinon le gag se jouerait hors écran.
Le double-clic sur index.html marche, mais certains navigateurs bloquent
les médias en file://. Passez par un serveur :
python3 -m http.server 8080 # puis http://localhost:8080Sans Python : npx serve .
Pour rejouer le prank : rechargez la page.
Ajoutez #decor à l'URL — http://localhost:8080/#decor. Le faux
chargement se fige à 48 % et la bascule ne se déclenche jamais, ce qui
permet de modifier les titres, les commentaires ou les miniatures
tranquillement.
Tout est en haut du <script>, dans le bloc RÉGLAGES :
| Variable | Effet |
|---|---|
DUREE |
durée du faux chargement, en ms (5200 par défaut) |
DEMARRER_AU_CLIC |
true = un gros bouton lecture attend un clic (voir ci-dessous) |
VOLUME |
volume du média final, 0 à 1 (sans effet sur un GIF) |
SOURCES |
la liste des médias essayés, dans l'ordre |
DELAI_SOURCE |
délai avant d'abandonner une source injoignable |
Le tableau etapes juste en dessous contrôle la forme de la barre : les
paliers sont volontairement irréguliers, avec un blocage à 48 %. Une
progression linéaire trahit la simulation en une seconde.
Les navigateurs interdisent la lecture sonore automatique sans geste utilisateur préalable. La page essaie quand même, et si c'est refusé elle démarre en muet puis active le son au premier clic / touche / toucher, avec un bouton « Activer le son » en repli visible.
Si votre média a du son et que vous le voulez à coup sûr, passez
DEMARRER_AU_CLIC = true : la cible doit alors cliquer sur le bouton
lecture pour lancer le chargement, et ce clic autorise le son pour la
suite. C'est aussi un poil plus crédible — on clique sur « play », c'est
un réflexe.
Le contenu de la fausse page est du HTML brut, modifiable directement :
titre de la vidéo, chaîne, nombre de vues, chapitres, commentaires,
suggestions de la colonne de droite. Les miniatures sont des div.terrain
avec un attribut --h (la teinte, 0-360) et des boules positionnées en
pourcentages — changez --h pour passer du terrain de midi au terrain
du soir.
Site statique, la racine du projet suffit.
npx vercel --prod # Vercel
npx netlify-cli deploy --prod --dir . # NetlifyGitHub Pages : Settings → Pages → branche main, dossier / (root).
Si le média dépasse 100 Mo, GitHub le refusera. De toute façon un fichier léger rend la bascule instantanée.
Prank inoffensif = média drôle, page qu'on peut fermer, personne piégée sur
un appareil qui n'est pas le sien. Évitez le son à plein volume dans un
open space, et ne l'envoyez pas à quelqu'un de photosensible : le flash
blanc et la secousse du lecteur peuvent gêner. La page respecte
prefers-reduced-motion, mais seulement si la personne a activé ce réglage.
La plateforme s'appelle « PétanqueTube » et les chaînes sont inventées : c'est un pastiche, pas une copie d'un vrai site. Gardez-le comme ça — une page qui se fait passer pour un service réel, ce n'est plus une blague.