Intégrer une vidéo en arrière-plan
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

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

Sébastien Imbert
13,99€
Acheter maintenant, payer plus tard. En savoir plus

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
45m30
 
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é
22m51
 
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
12m59
 
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
333
Apprenants
14
Commentaires
5/5
Note moyenne
5/5
14
4/5
0
3/5
0
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 26/08/2024
Très bon Tuto. Dommage que la partie menu Hamburger pour Media queries ne fasse pas l'objet d'une petite vidéo.
Valérie Caruana
Valérie Caruana
Publié le 09/07/2024
très intéressant et concret. approche pédagogique ++ Merci
Cédric Marniquet
Cédric Marniquet
Publié le 14/09/2020
Merci pour ce tuto :)

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).

Payer plus tard

Prix d'achat : 13,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données