Créer une sublime page d’attente

Un site utilisant WordPress

Créer une sublime page d’attente

Que ce soit pour annoncer l’ouverture de votre site web ou faire patienter vos visiteur lors d’une opération de maintenance, vous aurez envie de basculer votre blog en mode « Maintenance ».

J’utilise le plugin :

Plugin sympa pour les pages de maintenance

Seulement voilà… la version de base est dépourvue de modèle déjà tout près à fonctionner ni même à adapter.
C’est là que je me suis creusé un peu la tête pour chercher ce qui existe déjà mais finalement j’avais déjà une idée en tête !

Je voulais au moins un arrière plan qui bouge !
Soit je trouvais une animation en jQuery ce qui est très très léger pour un résultat qui s’adapte à tous les cas d’affichage (responsive) mais nécessite quelques recherches et beaucoup de temps à passer sur cette page, finalement, éphémère… Soit je partais d’une vidéo !

Dorénavant, ajouter une vidéo en fond de page qui plus est une vidéo « pleine page » n’est pas compliqué.
J’opte donc pour cette option.

Avant de trouver la vidéo parfaite, je voulais trouver une idée à adapter à mon besoin et c’est là que je suis tombé comme par miracle sur la page :
https://la-cascade.io/video-en-background/

C’était vraiment parfait et idéal pour débuter car c’est vraiment bien expliqué et facile comprendre.

Du coup, de retour dans mon plugin, dans l’onglet « Avancé » je n’ai eu qu’à coller le code de la page gentillement expliqué précédemment.
Astuce : j’ai copier le code entier donné par la page illustrant l’exemple ^^

Du coup, j’ai collé le code dans la zone « HTML personalisé »

Evidement il faut adapter quelques liens pour que les URL soit bonnes et fonctionnelles mais normalement ce n’est pas le plus difficile à comprendre !

Je vous offre une petite astuce suplémentaire : comment démarrer votre vidéo à un temps T ?
Solution : ajouter le code suivant :

<script>
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);
</script>

Placez ce code juste sous la section <video> et remplacer la valeur 50 par le temps (en seconde) de votre choix.

Attention tout de même : la durée de votre vidéo devra être connue par votre navigateur.

Cette astuce a été vue ici.

Pour en revenir à nos moutons, nous avons vu comment il était facile d’ajouter une vidéo en arrière plan d’une page.
Oui sauf que cette vidéo il faut l’héberger et parfois est elle est déjà hébergée ailleurs. Par exemple : Youtube !

Puisque j’ai trouvé une vidéo sympa, je vais profiter de la puissance et du stockage de Youtube pour afficher la vidéo sur ma page !

Pour le coup, avec Firefox, je m’aide de l’extension :
Video Download Helper

Sur la page Youtube de la vidéo de mon choix j’ouvre la fenêtre de l’extension « Video Download Helper »
Sur la même ligne que la miniature de votre vidéo, doit apparaître une flèche pointant vers la droite. Appuyez dessus.
Dans le nouveau menu ainsi apparu, cliquez sur « Détails ».

Et là, MIRACLE !

Vous avez non seulement l’adresse de la miniature mais surtout le lien directe vers la vidéo !
Même si l’adresse (URL) est fort longue et ne se termine pas par une extension de fichier, ce n’est pas grave car cette extension de fichier est specifiée dans le code HTML de votre nouvelle page.

Oui MAIS…

Car il y a un « mais » de taille.
L’URL de la vidéo n’est semble t-il valide que pour une durée limitée et pour votre session (cookie). Du coup, à vous de télécharger et héberger votre vidéo.

Pour la conversion, si besoin, j’utilise un service en ligne : https://video.online-convert.com/fr/convertir-en-webm

mp4 / webm

Le format webm n’est pas un impératif. Vous pouvez opter pour un fichier vidéo .mp4
Pour un convertisseur de fichier sur votre PC, je vous oriente vers ce message.
=> Fonctionne bien si on place tout le monde dans un dossier avec zéro espace dans le chemin d’accès !

Voilà grosso modo comment j’ai procédé.

Tags: , , , ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *