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

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.