comment afficher le contenu en dessous du plein écran vidéo d'arrière-plan

Je suis en train de concevoir une page d'atterrissage où j'ai une vidéo d'arrière-plan en plein écran, puis quand l'utilisateur fait défiler le contenu sous la vidéo. J'ai réussi à genre de faire fonctionner en définissant le contenu d'avoir une marge supérieure de 100vh mais il y a un fossé énorme entre la vidéo et le contenu ...comment afficher le contenu en dessous du plein écran vidéo d'arrière-plan

HTML

<body> 
    <div class="bgvid-back"> 
    <video class="bgvid" poster="media/skyline.jpg" autoplay="true" loop muted width="100%"> 
     <source src="media/BnW.webm" type="video/webm"> 
     <source src="media/BnW.mp4" type="video/mp4">  
    </video> 
    </div> 
    <ul class="menu"> 
     <li> 
      <a href="#" class="navburger" data-toggle="offCanvasLeft"> 
       <div class="one"></div> 
       <div class="two"></div> 
       <div class="three"></div> 
      </a> 
     </li> 
     <li><a href="#" class="logo"><img src="media/rsz_lucidity-logo.png"></a></li> 
    </ul> 
    <p class="content"> lorum ipsum </p> 
    </body>

CSS

.bgvid-back { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
overflow: hidden; 
z-index: -100; 
} 

.bgvid { 
position: absolute; 
top: 50%; 
left: 50%; 
width: auto; 
height: auto; 
min-width: 100%; 
min-height: 100%; 
-webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 

} 

@media (max-width: 767px) { 
.bgvid-back { 
    background: url("media/skyline.jpg") center center/cover no-repeat; 
} 

.fullscreen-bg__video { 
    display: none; 
} 
} 
.content { 
background-color: #313638; 
margin: 100vh 0 0 0; 
width: 100vh; 
}

c'est ce qu'il ressemble à atm:

vid shows in fullscreen as background

when scrolled down can see content but there is a large gap although margin-top: 100vh

merci à l'avance pour toute aide :)

im un peu d'un novice à css si appologies si cela est évident.

Source

2017-05-02 theo

1. votre image ne fonctionne pas. Téléchargez-le ici directement. 2. dans votre HTML, il n'y a pas de div ".content". S'il vous plaît faire un extrait de travail avec votre problème (il y a un bouton avec des signes <<> 'dans votre éditeur –

@MihaiT désolé j'ai oublié j'ai changé ce div également re image téléchargée. Est-ce mieux? – theo

vous avez également un menu , et c'est ce qui pousse le '.content' vers le bas car la marge commencera à partir du' .menu' et non du 'body' –

La raison pour laquelle votre contenu présente un écart énorme est que le menu pousse la marge supérieure 100vh vers le bas. Pour corriger cela, vous allez vouloir ajouter quelque chose comme le CSS suivant:

ul.menu { 
    position: absolute; 
    top: 0; 
}

Une fois que c'est ajouté votre contenu devrait agir normalement. Faites-moi savoir comment ça se passe!

Source

2017-05-02 15:18:56

c'est ce dont j'avais besoin, merci beaucoup! – theo

pas de problème @theo! –

comment afficher le contenu en dessous du plein écran vidéo d'arrière-plan

Répondre

Questions connexes