Intégrer une vidéo en arrière-plan
ERROR
00:00
00:00

TUTO Intégrer une vidéo en arrière-plan

Sébastien Imbert
14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

L'une des tendances du web design qui semble séduire le plus les internautes est celle des vidéos en arrière-plan (ou background video).
Une vidéo en arrière-plan, généralement positionnée sur le header de la page d'accueil d'un site, est un bon moyen de surprendre et susciter l'attention d'un visiteur.

Au cours de ce tuto intégrer une vidéo en arrière-plan, nous verrons :

  • comment intégrer une vidéo en arrière-plan à l'aide des positions CSS
  • comment remplir la zone de flottaison avec la vidéo afin d'avoir une vidéo en plein écran
  • mais aussi comment intégrer la vidéo dans un bloc (header / section) avec une hauteur fixe
  • où choisir ses vidéos et comment les optimiser et les convertir pour le web
  • comment créer et intégrer un pattern sur la vidéo à partir d'une image
  • comment intégrer un dégradé de couleur sur la vidéo
  • comment créer un bouton pour les utilisateurs qui souhaitent stopper la vidéo
  • comment réaliser un script javascript pour limiter le loop sur la vidéo

Les fichiers sources sont inclus avec ce tuto.
Je suis bien sûr disponible dans la section entraide pour répondre à vos questions.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Intégrer une vidéo en arrière plan
Chapitre 2
Optimisation, résolutions, formats et compatibilité
Chapitre 3
Un peu de Javascript pour améliorer l'expérience utilisateur

Plan détaillé du cours

Chapitre 1 : Intégrer une vidéo en arrière plan
45m30s
 
Leçon 1Création de la structure HTML
Leçon 2Superposition des éléments sur la video
Leçon 3Positionnement de la vidéo en plein écran
Leçon 4Centrer la vidéo
Leçon 5Design CSS 1/2
Leçon 6Design CSS 2/2
Leçon 7Responsive design
Leçon 8Optimiser la zone de flottaison en fixant une hauteur au header
Chapitre 2 : Optimisation, résolutions, formats et compatibilité
22m51s
 
Leçon 1Où trouver des vidéos pour une utilisation en arrière-plan ?
Leçon 2Compresser une vidéo pour le Web avec HandBrake
Leçon 3Les formats vidéo et leur compatibilité sur les navigateurs
Leçon 4Créer un pattern pour masquer les défauts de la vidéo
Leçon 5Intégrer un dégradé sur la vidéo
Chapitre 3 : Un peu de Javascript pour améliorer l'expérience utilisateur
12m59s
 
Leçon 1Création d'un bouton pour mettre la vidéo en pause 1/2
Leçon 2Création d'un bouton pour mettre la vidéo en pause 2/2
Leçon 3Limiter le loop sur la vidéo pour gagner en performances

Aperçus

Avis des apprenants

Détail des avis
194
Apprenants
12
Commentaires
5/5
Note moyenne
5/5
12
4/5
0
3/5
0
2/5
0
1/5
0
Cédric Marniquet
Cédric Marniquet
Publié le 14/09/2020
Merci pour ce tuto :)
Greg Cadoux
Greg Cadoux
Publié le 18/03/2020
Merci Sébastien, super tuto,tes explications, le ton dynamique, c'est top !!! Je valide et j'ai hâte de te retrouver dans un autre tuto.
Alain Painchaud
Alain Painchaud
Publié le 08/09/2019
Super tuto bien expliqué. Ne reste pus qu’à mettre tout ça en pratique.???? Alain

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

L'intégration de la vidéo en arrière-plan, et les effets crées dans ce tuto peuvent-ils être réalisés sur un site Wordpress ?

Dans ce tuto je montre comment mettre en place une vidéo en arrière-plan en créant le HTML et le CSS depuis un éditeur classique. Je n'explique pas comment mettre ça en place sur un CMS comme Wordpress. Pour mettre en place le code réalisé sur un Wordpress, cela va se faire plus ou moins facilement en fonction du thème, si ce dernier permet l'intégration de code personnalisé ou pas. Si le thème ne le permet pas il faudra rentrer dans le code du thème et y intégrer son propre code. Dans tous les cas, le code (HTML5 et CSS3) crée dans mon tuto fonctionnera sur n'importe quel site, et par conséquent n'importe quel CMS assez ouvert aux personnalisations (c'est le cas d'un wordpress ou prestashop par exemple).

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données