简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment intégrer une vidéo d'arrière-plan en HTML/CSS ?
P粉176203781
P粉176203781 2023-11-06 13:59:13
0
1
849

Bonjour à tous, j'ai rencontré un problème récemment. J'essaie de définir un arrière-plan vidéo sur mon site, mais le texte centré va jusqu'en bas, je ne sais pas pourquoi, pourtant la barre de navigation va bien. J'ai fait beaucoup de recherches mais je ne trouve pas de solution.

Pour CSS, j'ai effectué les réglages suivants : 


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: TESLA Regular;
}
.hero{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12,3,51,0.3));
    position: relative;
    padding: 0 5%; 
    display: flex;
    align-items: center;
    justify-content: center;
}
nav{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav .logo{
    width: 150px;
}
nav ul li{
    list-style: none;
    display: inline-block;
    margin-left: 40px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
.content{
    text-align: center; 
}
.content h1{
    font-size: 160px;
    color: rgb(110, 57, 57);
    font-weight: 600;
    transition: 0.5s;
}
.content h1{
    -webkit-text-stroke:2px rgb(212, 28, 28) ;
    color: transparent;
}
.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
@media (min-aspect-ratio: 16/9){
    .back-video{
        width: 100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    .back-video {
        width: auto;
        height: 100%;
    }
}

> 对于HTML，我做了以下设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="hero">
    
        <video autoplay loop muted plays-inline>
            <source src="mylive.mp4" type="video/mp4">
        </video>
        <nav>
            <img src="2086940.jpg" class="logo" alt="">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Zone</a></li>
                <li><a href="#">Gaming</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About us</a></li>
    
            </ul>
        </nav>
        <div class="content">
            <h1>Gaming is not a crime!</h1>
        </div>
</body>
</html>


P粉176203781
P粉176203781

répondre à tous(1)
P粉314915922
P粉3149159222023-11-07 11:31:24 1 plancher

Oui, il est possible d'ajouter des vidéos comme arrière-plans en utilisant HTML et CSS.

1) Ajoutez une balise vidéo et une référence vidéo dans le fichier HTML comme indiqué ci-dessous : 

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

2) Réglez la largeur et la hauteur à 100 % pour couvrir toute la fenêtre et utilisez la position fixe pour définir la vidéo comme arrière-plan. Vous pouvez rencontrer des problèmes liés à la visibilité, mais ceux-ci peuvent être résolus à l'aide des effets de z-index et de superposition d'arrière-plan. 

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！