Videos as background

Question

Videos as background

Navigation

#1 by (1 votes)

1

I am working on a website where I have to place 3 background videos and apply parallax effect in different sections of the web, in the first section I have put the background video and it is reponsive and I have no problem, the problem it comes when I'm going to put the other videos, if I want the parallax effect, it overlaps me with the first one, if I give it a minor z-index, it does not look like it pq covers it first.

What attributes should I put or take into account in the CSS when doing this?

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

In the code I've put it that way, pq works but I can not get the parallax effect and the video does not run "responsive", with the first I have no problem.

Thank you very much

html5 css3 css

asked by Corey Borja 19.02.2017 в 23:57

source

1 answer

Problem changing a div's background Problem google maps api not shown map

score 1 · Accepted Answer

if it works for you at the concept level:

The most recent divs always have priority over the previous div in case of sharing position:

The second div in equal conditions / style, will be seen above the first one if this were the case.

For that we have as you say, the z-index property.

The higher the numerical value, the higher visibility priority you will have:

z-index: 1 < z-index: 99

In your case, first it is to know which videos you want to pass over which, if the last ones over the first ones, or vice versa.

When you have it clear, simply apply priorities with z-index. If it is to be used in paralax, you can create z-index styles and apply them to labels, for example:

.z1{ z-index: 1 }
.z10{ z-index: 10 }
.z100{ z-index: 100 }

Then you add this class to the videos and prioritize which ones are above which. I would recommend leaving good ranges of separation if in the future you have intermediate objects to be able to intersperse them.

<video class="z10"></video>
<video class="z100"></video>
<video class="z1"></video>

In this way, the second passes over the first video, and the third below the second and the first.

There are other ways to do it but I would recommend you start like this until you get more fluency;)

I hope I helped you, a greeting.