CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design Comment Intégrer une Vidéo en Plein Écran en Arrière-Plan

Comment Intégrer une Vidéo en Plein Écran en Arrière-Plan

Réaliser l'intégration plein écran d'une vidéo
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Présentation et Objectifs de la Leçon

Objectifs

Les objectifs de cette vidéo sont les suivants :

  • Intégrer une vidéo en arrière-plan sur une page web.
  • Utiliser CSS pour positionner et ajuster la vidéo.
  • Écrire un script JavaScript pour adapter la vidéo à la taille de l'écran.

Résumé

Apprenez à intégrer une vidéo en arrière-plan sur une page web en utilisant HTML5, CSS et JavaScript.

Description

Dans cette leçon, nous allons apprendre à intégrer une vidéo en plein écran en arrière-plan sur une page web. Bien que cette leçon ne traite pas directement des media query et du Responsive Design, elle en fait tout de même partie, car la vidéo s'adapte parfaitement à la taille de l'écran, quelle que soit sa dimension.

Nous allons commencer par ajouter une zone de vidéo dans notre code HTML en utilisant une balise HTML5 vidéo et l'élément div. Ensuite, nous configurerons les attributs autoplay et loop pour lancer automatiquement et en boucle la vidéo dès l'ouverture de la page. Nous intégrerons ensuite la vidéo à l'aide de l'élément source en précisant le chemin et le type du fichier vidéo.

Enfin, nous utiliserons JavaScript pour ajuster la taille de la vidéo en fonction des dimensions de l'écran. Nous verrons comment calculer les rapports hauteur-largeur de la vidéo et de l'écran pour adapter dynamiquement la taille de la vidéo en arrière-plan. Nous ajouterons également des règles de style CSS pour positionner correctement la vidéo.

À la fin de cette leçon, vous saurez comment intégrer une vidéo en arrière-plan sur une page web de façon adaptive et esthétique.

Voir plus

Questions - réponses

Pourquoi utilise-t-on l'attribut autoplay dans la balise vidéo ?
L'attribut autoplay permet de démarrer automatiquement la lecture de la vidéo dès l'ouverture de la page, ce qui est essentiel lorsque la vidéo est utilisée comme arrière-plan, sans contrôles utilisateur.
Quelle est l'utilité de l'attribut loop dans la balise vidéo ?
L'attribut loop permet de rejouer la vidéo en boucle indéfiniment, garantissant que l'arrière-plan vidéo ne s'arrête jamais lors de la navigation sur la page.
Comment le JavaScript ajuster la taille de la vidéo à celle de l'écran ?
Le script JavaScript ajuste la taille de la vidéo en calculant le rapport largeur/hauteur de la vidéo et de l'écran, puis en appliquant ces rapports pour adapter dynamiquement les dimensions de la vidéo.

Programme détaillé