FullPage JS behobenes Hintergrundbild

-2

Ich benutze FullPage JS und möchte einen festen Videohintergrund mit scrollendem Inhalt implementieren. Ich habe das Video auf Abschnitt 1 eingestellt, aber beim Scrollen wechselt es zu einem weißen Hintergrund. Eine Hilfe wäre großartig!FullPage JS behobenes Hintergrundbild

#fullpage { 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

<div id="fullpage"> 
    <video autoplay loop muted id="myVideo"> 
      <source src="video/empty.mp4" type="video/mp4"> 
      <source src="video/empty.webm" type="video/webm"> 
     </video> 
</div> 





#myVideo{ 
     position: fixed; 
     right: 0; 
     bottom: 0; 
     top:0; 
     right:0; 
     width: 100%; 
     height: 100%; 
     background-size: 100% 100%; 
     background-color: black; 
     background-image: /* our video */; 
     background-position: center ; 
     background-size: cover; 
     object-fit: cover; 
     z-index: -1; 
     overflow: hidden 
}

Quelle

2016-04-17 PaKMaN

Warum machen Sie es so komplex? Schau dir dieses einfache Tutorial für den Video-Hintergrund an. http://marketblog.envato.com/tips/video-background-html5-video/

Unten CSS-Snippet wird die Arbeit für Sie erledigen.

video { 
    margin: 0; 
    padding: 0; 
} 
.content { 
    position: relative; 
    z-index: 2; 
} 
.video { 
    position: fixed; 
    z-index: 1; 
}

entsprechenden HTML-Teil

<body> 
<video id="my-video" class="video"> 
    <source src="media/demo.mp4" type="video/mp4"> 
    <source src="media/demo.ogv" type="video/ogg"> 
    <source src="media/demo.webm" type="video/webm"> 
</video> 
</body>

Quelle

2016-04-22 07:33:38 Mahesh

Haben Sie auch einen Blick auf Ihren Link genommen? Darin sehen Sie, dass ein Vollbild-Videoelement mehr Eigenschaften benötigt ... ".video { position: fixed; oben: 50%; links: 50%; Z-Index: 1; minimale Breite: 100%; min-Höhe: 100%; Breite: Auto; Höhe: Auto; transform: translate (-50%, -50%); } ' – Alvaro

Es scheint mir sein Problem ist mit festen Videos und der Verwendung von' translate3d' Eigenschaften von Fullpage.js verwandt. – Alvaro

Antwort

Verwandte Themen