Centrer une vidéo en HTML

1. Utilisez les propriétés CSS margin, width et display pour centrer la vidéo en HTML
2. Utilisez la balise center pour centrer la vidéo en HTML
3. Utilisez la propriété CSS text-align pour centrer la vidéo en HTML

Ce tutoriel abordera quelques méthodes pour centrer une vidéo en HTML.

Utilisez les propriétés CSS margin, width et display pour centrer la vidéo en HTML

On peut utiliser la combinaison des propriétés CSS margin, width et display pour centrer une vidéo en HTML. Nous utilisons la propriété margin pour définir la marge d’un élément dans les quatre directions.

Nous utiliserons la propriété pour appliquer une marge à la balise video dans cette méthode. On peut utiliser la propriété width pour donner à un élément une certaine largeur.

Nous pouvons définir la largeur dans différentes unités comme px, em et même le pourcentage. Nous verrons la différence entre l’utilisation de ces unités dans l’exemple ci-dessous.

La propriété display est essentielle pour définir le comportement d’affichage de l’élément sélectionné. Il prend des valeurs comme block, inline-block et inline.

Enfin, on utilise la balise video pour insérer une vidéo en HTML.

Par exemple, écrivez une balise video en HTML avec une classe center. Tout d’abord, spécifiez l’URL correcte du fichier vidéo dans l’attribut src.

Ensuite, écrivez l’attribut controls et fermez la balise video. Sélectionnez la balise center dans CSS et appliquez la propriété margin.

Définissez la valeur de la propriété sur 0 auto et donnez à la vidéo une largeur de 300px. Enfin, définissez la propriété display sur block.

Maintenant, nous allons décrire ce que nous avons fait dans les étapes ci-dessus. L’attribut controls dans la balise video affichera les commandes pour mettre en pause, lire, faire glisser, augmenter et diminuer le volume et basculer en plein écran.

Si nous supprimons l’attribut controls de la balise, la barre de contrôle disparaîtra de la vidéo.

La propriété margin de CSS définira les marges supérieure et inférieure sur 0. Les marges left et right sont réglées sur auto.

Cela signifie que la vidéo prendra la largeur spécifiée de 300px, et le reste de l’espace est divisé également et est défini comme les marges gauche et droite.

L’élément vidéo est défini comme un élément de niveau bloc afin que la vidéo occupe l’espace du bloc entier. Il permet aux propriétés à venir d’entrer en vigueur.

Par conséquent, nous pouvons centrer une vidéo en HTML en utilisant les propriétés CSS comme les propriétés margin, width et display.

Exemple de code :

<video class="center" src="pointing_pink.mp4" controls></video>

.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

Cependant, cette méthode a un défaut. Dans l’exemple ci-dessus, nous avons utilisé l’unité px dans width.

Lorsque nous redimensionnons la fenêtre du navigateur ou naviguons sur le site Web à partir de la vue mobile, la vidéo ne sera pas réactive.

Nous pouvons utiliser % ou vw dans la propriété width pour résoudre ce problème. Lorsque nous utilisons ces unités, l’élément vidéo est réactif.

Voyons l’exemple ci-dessous.

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

Utilisez la balise center pour centrer la vidéo en HTML

On peut aussi utiliser la balise HTML center pour centrer un élément en HTML.

La balise a été utilisée jusqu’à HTML4. Les navigateurs modernes ne prennent pas en charge la balise.

Cependant, certains navigateurs plus anciens le prennent toujours en charge. Il est donc déconseillé d’utiliser la balise center pour centrer un élément en HTML.

Quoi qu’il en soit, nous examinerons l’utilisation de la balise pour centrer une vidéo dans cette section.

Par exemple, créez une balise video et insérez une vidéo. Utilisez la propriété width pour donner une certaine largeur à la vidéo.

Ensuite, enveloppez la balise video avec la balise center. Par conséquent, la vidéo sera centrée.

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

Utilisez la propriété CSS text-align pour centrer la vidéo en HTML

Comme mentionné précédemment, l’utilisation de la balise center est déconseillée. Une alternative à la balise center consiste à utiliser la propriété CSS text-align.

Nous pouvons définir la propriété text-align pour centrer l’élément au centre. On peut implémenter cette technique pour centrer la vidéo.

Ensuite, nous pouvons emballer la vidéo dans un conteneur et appliquer les styles.

Par exemple, créez un div avec la classe center. A l’intérieur de la div, créez une balise video pour insérer la vidéo.

Vous pouvez soit définir la largeur de la vidéo en HTML, soit utiliser la propriété width du CSS. En CSS, sélectionnez la classe center et définissez la propriété text-align sur center.

Ainsi, la vidéo sera centrée.

Exemple de code :

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>

.center{
 text-align: center;
}

Cet article nous a appris trois façons différentes de centrer une vidéo en HTML. Nous avons utilisé la propriété margin, la balise center et la propriété text-align pour centrer la vidéo en HTML.