Estoy trabajando en una web en la que debo colocar 3 videos de fondo y aplicar efecto parallax en diferentes secciones de la web, en la primera sección he puesto el video de fondo y me es reponsive y no tengo ningún problema, el problema viene cuando voy a poner los otros videos, si quiero el efecto parallax, se me superpone con el primero, si le doy un z-index menor, no se ve pq lo tapa el primero.
Que atributos debo poner o tener en cuenta en el CSS a la hora de hacer esto?
/*Aqui el primer video*/
.home {
width: 100%;
height: 100vh;
background: url(img/rtlCD.jpg);
background-size: cover;
background-position: center center;
position: relative;
display: block;
justify-content: center;
align-items: center;
background-attachment: fixed;
}
#videoRtl{
position: fixed;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/*Aqui el segundo video*/
.containerShop{
width: 100%;
height: 80vh;
background: url(img/rtlCD.jpg);
background-size: cover;
background-position: center center;
position: relative;
display: block;
justify-content: center;
align-items: center;
background-attachment: fixed;
}
#videoRtl2{
position: absolute;
width: auto;
height: auto;
max-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Retrace The Lines</title>
<link rel="icon" type="image/png" sizes="16x16" href="css/img/FAVICON/logo16.png">
<link rel="icon" type="image/png" sizes="32x32" href="css/img/FAVICON/logo32.png">
<link rel="icon" type="image/png" sizes="96x96" href="css/img/FAVICON/logo96.png">
<link rel="icon" type="image/png" sizes="192x192" href="css/img/FAVICON/logo192.png">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script>
$.stellar();
</script>
</head>
<body>
<div id="menuContainer">
<nav id="menu">
<ul>
<a href="#rtl"><li>o</li></a>
<a href="#meetUs"><li>o</li></a>
<a href="#videos"><li>o</li></a>
<a href="#tourDates">o<li></li></a>
<a href="#shop"><li>o</li></a>
<a href="#music"><li>o</li></a>
<a href="#contact"><li>o</li></a>
</ul>
</nav>
</div>
<!--End menuContainer-->
<section id="containerRtl" class="home" data-stellar-background-ratio="0.5">
<video id="videoRtl" src="css/vid/Test01.mp4" autoplay loop muted></video>
<div id="logo">
<img id="img1" src="css/img/RtlLogoBlanco.png"/>
</div>
<div id="container1">
<div id=container1Shop>
<a href="#"><p>GET IT HERE</p></a>
</div>
<br/>
<div id="containerScrollButton">
<img id="img2" class="img2" src="css/img/295892-0-scrollDown.png"/>
</div>
</div>
</section>
<!--End containerRtl-->
<section id="containerShop" class="containerShop" data-stellar-background-ratio="0.5">
<video id="videoRtl2" src="css/vid/RTL_Cube_web_3.mp4" autoplay loop muted></video>
<h1 id="titleRtl"><span class="azul">"DEPARTURES / ARRIVAL"</span>
<br/>
<span class="normal">Official Store</span></h1>
<div id="container2">
<a href="#">GO TO SHOP</a>
</div>
</section>
En el código lo he puesto así, pq funciona pero no consigo el efecto parallax ni el video se me ejecuta "responsive", con el primero no tengo ningún problema.
Muchas gracias
parallax
solo aclaras que al hacerscroll
habrá diferentes planos moviéndose a diferente velocidad.