Maison > Article > interface Web > Comment ajouter une vidéo d'arrière-plan en plein écran à l'aide de Tailwind CSS ?
Comment ajouter une vidéo d'arrière-plan en plein écran à l'aide de Tailwind CSS ?
- PHPzavant
- 2023-09-06 21:17:021234parcourir
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 39000f942b2545a5315c57fa3276f220 de HTML5
Étape 1 - Créez un fichier HTML et incluez le lien Tailwind CSS CDN dans l'en-tête du fichier -
ExempleRegardons 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>
Étape 2 - Créez un élément conteneur avec la classe "bg-video" et ajoutez une balise 39000f942b2545a5315c57fa3276f220 avec la classe "bg-video__content" à l'intérieur -
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="Particles.mp4" type="video/mp4">
</video>
</div>
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%;
}
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 -
ExempleVoyons 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>
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 -
ExempleNous 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>
É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>
É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;
}
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 -
ExempleNous 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>
ConclusionDans 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!