$ 14.00

Tuto Intégrer une vidéo en arrière-plan avec CSS

$ 14.00

  • Une formation vidéo de 1h21m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation CSS (durée : 1h21m)

  • Intégrer une vidéo en arrière plan
    • Création de la structure HTML 00:06:05
    • Superposition des éléments sur la video 00:07:36
    • Positionnement de la vidéo en plein écran 00:04:14
    • Centrer la vidéo 00:06:23
    • Design CSS 1/2 00:06:43
    • Design CSS 2/2 00:03:49
    • Responsive design 00:06:47
    • Optimiser la zone de flottaison en fixant une hauteur au header 00:03:53
  • Optimisation, résolutions, formats et compatibilité
    • Où trouver des vidéos pour une utilisation en arrière-plan ? 00:05:19
    • Compresser une vidéo pour le Web avec HandBrake 00:02:15
    • Les formats vidéo et leur compatibilité sur les navigateurs 00:05:17
    • Créer un pattern pour masquer les défauts de la vidéo 00:04:49
    • Intégrer un dégradé sur la vidéo 00:05:11
  • Un peu de Javascript pour améliorer l'expérience utilisateur
    • Création d'un bouton pour mettre la vidéo en pause 1/2 00:04:53
    • Création d'un bouton pour mettre la vidéo en pause 2/2 00:03:20
    • Limiter le loop sur la vidéo pour gagner en performances 00:04:46



Formateur : Sébastien Imbert

Sébastien Imbert a publié 6 tutoriels et obtenu une note moyenne de 4,8/5 sur 335 tutoriels vendus. Voir les autres formations de Sébastien Imbert

  • 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).
accédez à plus de 1571 tuto gratuits


non, je ne veux pas me former gratuitement