Comment ajouter une vidéo d'arrière-plan en plein écran à l'aide de Tailwind CSS ?-tutoriel HTML-php.cn

Comment ajouter une vidéo d'arrière-plan en plein écran à l'aide de Tailwind CSS ?

PHPz

Libérer： 2023-09-06 21:17:02

avant

1238 Les gens l'ont consulté

如何使用Tailwind CSS添加全屏背景视频？

Présentation

Dans cet article, nous allons vous montrer comment ajouter une vidéo d'arrière-plan plein écran à votre page Web à l'aide de Tailwind CSS. Tailwind CSS est un framework CSS axé sur les utilitaires qui facilite la création de conceptions réactives et cohérentes. Il fournit un ensemble de classes CSS que vous pouvez utiliser pour ajouter rapidement des styles aux éléments HTML.

L'ajout de vidéos d'arrière-plan en plein écran à vos pages Web peut considérablement améliorer l'expérience utilisateur et ajouter un intérêt visuel à votre site Web. En utilisant Tailwind CSS, vous pouvez facilement créer une vidéo d'arrière-plan plein écran qui fonctionne bien sur tous les appareils et toutes les tailles d'écran.

Méthode

Nous présenterons deux façons d'ajouter une vidéo d'arrière-plan en plein écran -

Utilisez les balises HTML5
Utiliser la propriété d'image d'arrière-plan CSS

Méthode 1 : utilisez la balise

Étape 1 - Créez un fichier HTML et incluez le lien Tailwind CSS CDN dans l'en-tête du fichier -

Exemple

Regardons un exemple pour mieux comprendre cela.

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

Copier après la connexion

Étape 2 - Créez un élément conteneur avec la classe "bg-video" et ajoutez une balise

<div class="bg-video">
   <video class="bg-video__content" autoplay muted loop>
      <source src="Particles.mp4" type="video/mp4">
   </video>
</div>

Copier après la connexion

REMARQUE - Ici, nous avons utilisé une vidéo libre de droits téléchargée depuis Pixabay

Étape 3 - Dans le fichier CSS, utilisez la classe .bg-video pour mettre la vidéo en plein écran et masquer le débordement -

.bg-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.bg-video__content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Copier après la connexion

Cette méthode utilise la balise HTML5

pour ajouter une vidéo d'arrière-plan plein écran à votre page Web. Les propriétés de lecture automatique, de sourdine et de boucle garantissent que la vidéo tourne automatiquement en boucle. La balise

Étape 4 - Fusionnez le code complet en un seul index.html comme indiqué ci-dessous -

Exemple

Voyons un exemple pour mieux comprendre cela.

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   <style>
      .bg-video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
      }
      .bg-video__content {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body>
   <div class="bg-video">
      <video class="bg-video__content" autoplay muted loop>
         <source src="https://mazwai.com/videvo_files/video/free/2018-03/small_watermarked/180301_15_B_KowloonPark_06_preview.webm" type="video/mp4">
      </video>
   </div>
</body>
</html>

Copier après la connexion

Méthode 2 : utilisez la propriété background-image de CSS

Étape 1 - Créez un fichier HTML et incluez le lien Tailwind CSS CDN dans l'en-tête du fichier -

Exemple

Nous allons maintenant explorer cela à l'aide d'un exemple.

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

Copier après la connexion

Étape 2 - Créez un élément conteneur avec la classe "bg-video" et ajoutez le contenu de votre choix à l'intérieur du conteneur -

<div class="bg-video">
   <p>Welcome to Tutorials Point</p>
</div>

Copier après la connexion

Étape 3 - Téléchargez des vidéos libres de droits à partir de sites comme Pixabay et utilisez un convertisseur en ligne pour convertir vos vidéos en gifs.

Étape 4 - Dans votre fichier CSS, définissez la vidéo comme arrière-plan à l'aide de la classe .bg-video et de la propriété background-image -

bg-video {
   background-image: url('particles.gif');
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: white;
}

Copier après la connexion

Cette méthode utilise la propriété CSS background-image pour ajouter une vidéo d'arrière-plan plein écran à votre page Web. Les propriétés

background-size et background-position sont utilisées pour garantir que la vidéo est mise à l'échelle et positionnée correctement.

Étape 5 - Le code complet combiné en un seul index.html est ci-dessous -

Exemple

Nous allons maintenant explorer cela à l'aide d'un exemple.

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   <style>
      .bg-video {
         background-image: url('https://media.giphy.com/media/B0g68d61knrG0/giphy.gif');
         background-size: cover;
         background-position: center;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 100%;
         color: white;
      }
   </style>
</head>
<body>
   <div class="bg-video">
      <h1>Welcome to Tutorials Point</h1>
   </div>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous vous montrons comment ajouter une vidéo d'arrière-plan plein écran à votre page Web à l'aide de Tailwind CSS. Nous avons couvert deux façons d'ajouter une vidéo d'arrière-plan, qui impliquent toutes deux d'utiliser les classes CSS Tailwind pour créer l'effet souhaité

La première méthode utilise la balise HTML5

pour ajouter une vidéo d'arrière-plan en plein écran, tandis que la seconde méthode utilise la propriété CSS background-image. Les deux méthodes sont simples et faciles à mettre en œuvre, et vous pouvez choisir celle qui correspond le mieux à vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!