Gratuit : Afficher un mini lecteur vidéo
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Gratuit : Afficher un mini lecteur vidéo

Nicolas Mercier

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto en vidéo gratuit, nous allons voir comment afficher un mini lecteur vidéo dans une page web.

Au programme de ce tuto gratuit afficher un mini lecteur vidéo au scroll d'une page 

  • Dans un premier temps, nous allons créer la structure de base du contenu de la page.
    Elle sera composée d'une vidéo YouTube et d'un long texte pour qu'on puisse faire défiler la page verticalement.
  • Ensuite, nous utiliserons Javascript et du CSS pour gérer l'affichage du mini lecteur.

L'objectif de ce cours est d'apprendre à afficher un mini lecteur dans le coin en bas à droite de l'écran lorsque le lecteur principal est en dehors de la page. Nous ferons également en sorte que la vidéo se joue en continu lors du basculement des lecteurs. Et enfin, nous ajouterons un bouton permettant de désactiver le mini lecteur.

Grâce à cette formation gratuite en vidéo, vous allez apprendre à utiliser la méthode getBoundingClientRect pour connaître la position d'un élément dans la page. Et nous utiliserons des écouteurs d'événements pour appeler différentes méthodes.

Cette formation est accessible aux débutants. Elle est simple rapide et efficace.
Je reste disponible pour répondre à vos éventuelles questions, dans le salon d'entraide.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en page et préparation de la page HTML
Leçon 2
Affichage du mini lecteur

Plan détaillé du cours

Leçon 1Mise en page et préparation de la page HTML
01m35s
Leçon 2Affichage du mini lecteur
13m01s

Aperçus

Avis des apprenants

Détail des avis
238
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Philippe Piatti
Philippe Piatti
Publié le 21/12/2019
Super bon vivement la suite ! ... :)
Membre-4083-799
Membre-4083-799
Publié le 15/12/2019
Clair et précis. Aucune hésitation et totala maitrise
Didier Collé
Didier Collé
Publié le 07/12/2019
Efficace, merci.bon tuto

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

JavaScript , CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données