Depuis quelque temps Youtube est devenu mon player par défaut sur les pages dédiées à mes projets. Comme j’aime bien que mes sites web racontent eux aussi des histoires, il me semblait important d’intégrer les vidéos le mieux possible sur les pages. J’ai tendance à concevoir mes sites comme un empilement de strates les unes au dessus des autres. Ici, l’idée est d’utiliser un image avec un « trou » dedans pour voir apparaître la vidéo en dessous. Le dernier exemple en date « Murmures« . Comme certain·e·s semblent apprécier cet « effet » et que ce n’est pas très compliqué (pour qui connait un peu le html et le css) voici un tuto illustré !

1/-Préparer une image où la vidéo sera insérée

Ceci est un photo sous licence CC0 de Donald Tong

 

Une fois que vous avez trouvé ou photographié vous même l’image qui vous intéresse, il va falloir faire un « vide » dedans pour laisser apparaître la vidéo Youtube au bon endroit. Pour cela j’utilise mon logiciel de retouche d’image favori Pixelmator (MacOS).

Ici, l’idée est d’enlever toute la zone de l’écran pour y caler notre vidéo ensuite. Pour cela, j’utilise un outil magique de sélection.

On sélectionne toute la zone.

Puis on affine un peu.

Grâce à cet outil.

On obtient un résultat assez propre avec un petit effet de flou sur les bords.

On exporte en png pour conserver la transparence de l’image.

Et voilà !

2/- Réduire un peu la taille de l’image

A ce moment de l’histoire, notre image pèse presque 2Mo. Ce n’est pas énorme sur votre ordinateur, mais sur le web, cela commence à devenir assez lourd et cela risque d’utiliser pas mal de Data et de temps à vos visiteurs. Je tiens à remercier Stan (Signez) qui m’a fait découvrir le site TinyPNG qui va apporter la solution à ce problème de taille (oh oh).

On uploade notre image.

Le site la compresse sans perte de qualité (et diminution de 74% du poids).

3/- Commencer le site web

Dans un nouveau dossier, créer les dossiers et fichiers suivants. Pour le index.html un éditeur de texte basique suffit. Chez moi, j’utilise Atom qui est un poil plus complexe et met en couleur le code tapé, ce qui est agréable pour les yeux.

Le contenu du dossier de votre site.

La page index.html qui sera ici la seule page du site.

 

4/- Récupérer le code pour insérer votre vidéo

On retrouve SA vidéo sur Youtube.

On récupère le code qui va permettre de l’insérer dans notre page index.html

5/- Terminer sa page index.html

On crée un cadre pour l’image et un pour la vidéo Youtube où l’on colle le code récupéré.

On fait une ou deux modifications pour gérer les tailles d’écrans différentes.

Et voilà le résultat !!!

6/- Créer la feuille de style qui va donner vie à tout le site

Ben oui, vous avez bien compris que ce n’était pas fini. Dans le dossier css, créer un nouveau document nommé main.css. C’est votre feuille de style, celle qui va dire de quelle couleur sera la page, quelle police d’écriture et à quoi ressemblent les « cadres » qui accueillent le contenu.

Voici le contenu du fichier main.css

Et voici le résultat.

 

Comme notre vidéo est « au dessus » de notre image et qu’on veut qu’elle soit « en dessous », on utilise le z-index pour modifier cela.

Ben, du coup… notre vidéo a disparu sous l’image. Malin…

 

Pas complique, il suffit de bouger la vidéo pour la mettre pile sous le trou de l’image qui est au dessus.

 

Et voilà !!!

7/- Finitions

Bon, vous êtes encore là ? C’est presque fini, promis. Tout d’abord, voici le lien vers la page à ce moment précis. Allez-y et trouvez les 2 problèmes (un gros, un petit).

Alors, vous avez trouvé ? Voici les réponses pour comparer :

  1. On ne peut pas cliquer sur la vidéo (gros problème)
  2. La vidéo n’est pas assez penchée pour correspondre pile-poil au « trou » laissé (petit problème)

Pour le premier problème, c’est normal. L’image bien que transparente, n’a pas de « vrai trou » dedans. Pour votre navigateur, la vidéo est toujours cachée dessus et donc non cliquable. Pour la rendre accessible, on va ajouter une ligne dans le fichier main.css.

pointer-events:none; 1 ligne ;p

Et voilà (on peut cliquer, quand on passe la souris dessus, le logo Youtube devient rouge).

Pour le second problème, on va utiliser des propriétés css qui permettent de donner un effet « 3D » à nos « cadres ». Une ligne et quelques trifouillages et c’est réglé !

1 ligne aussi ! Mais vous remarquerez que certaines valeurs des autres paramètres ont changé pour recaler l’image.

Voilà ce qui arrive quand on force un peu trop sur l’effet 3D, c’est ce que j’ai fait pour le site « Le Vaisseau ».

8/- Résultat final

Voilà, votre mini-site est terminé. En utilisant le Z-index, vous pouvez créer d’autres cadres pour ajouter un titre par dessus l’ensemble… Je vous laisse avec la démo et l’ensemble du dossier compressé pour tester chez vous.

Si cela vous intéresse dans un prochain tuto, je pourrais vous parler de comment rendre cette page plus accessible sur un téléphone portable avec un petit écran (si vous regardez le résultat sur un portable, vous devez vous rendre compte que c’est pas hyper pratique).

Bises !

 
6 Kudos
Ne
bougez
pas!