FullPage JS固定背景画像

-2

私はFullPage JSを使用しており、スクロールコンテンツを含む固定のビデオ背景を実装したいと考えています。私はセクション1に設定されたビデオを持っていますが、スクロールすると背景が白に変わります。助けが素晴らしいだろう！FullPage JS固定背景画像

#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 
}

出典

2016-04-17 PaKMaN

なぜあなたはそれを非常に複雑にしていますか？ビデオの背景については、このシンプルなチュートリアルをご覧ください。 http://marketblog.envato.com/tips/video-background-html5-video/

以下、CSSスニペットがあなたのために働きます。

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

HTMLの一部を対応する

<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>

出典

2016-04-22 07:33:38 Mahesh

あなたもあなたのリンクを見て撮影したことがありますか？あなたはフルスクリーンのビデオ要素がより多くの特性を必要とするのを見ることができます.'video { position：fixed; トップ：50％;左：50％; z-インデックス：1; min-width：100％; 最小高さ：100％; 幅：自動; 身長：自動; トランスフォーム：translate（-50％、-50％）; } ' – Alvaro

私の問題は、固定ビデオと、fullpage.jsで使用される' translate3d'プロパティの使用に関連しているようです。 – Alvaro

答えて

関連する問題