I am a front-end noob and have started making myself a web portfolio to get better at coding. I took an open-source template from Traversy Media and have been making it my own. The problem is that I want my video editing reel to be the background of my landing page. I cannot get this to work no matter what I try. No matter what, it always sits in front of my logo and buttons. I even had my buddy, who is a front-end developer, take a look at it and he was stumped. Z-index's don't work, I made sure to add position: relative to everything and nope.
I am using sass which I am not really familiar with. My guess is that it's something in the sass that is overriding whatever I do to the video/logo. Either that or I messed up the structure of my html in some way. At this point I have no idea what the solution is, so here is my repo: https://github.com/rkgregory/modern_portfolio-master.
Here is my code
@import "config";
@import "menu";
* {
box-sizing: border-box;
}
body {
@include background;
background: $primary-color;
color: set-text-color($primary-color);
height: 100%;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
overflow-x: hidden;
}
// Headings
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
&.lg-heading {
font-size: 6rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
&.sm-heading {
margin-bottom: 2rem;
padding: 0.2rem 1rem;
//background: rgba(lighten($primary-color, 2), 0.5);
}
}
a {
color: #fff;
text-decoration: none;
}
// trying to add video
header {
position: absolute;
width: 100%;
overflow-x: hidden;
}
// .v-header {
// height: 100vh;
// display: flex;
// align-items: center;
// }
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-width: 100%;
min-height: 100%;
z-index: 2;
}
// done trying to add video
.ondary {
color: $secondary-color;
}
main {
margin: auto;
width: 100%;
text-align: center;
padding: 4rem;
height: 100%;
min-height: calc(100vh - 60 px);
position: relative;
z-index: 200;
.rg-logo {
width: 60%;
position: relative;
z-index: 300;
}
.custom-container {
height: 100%;
margin-top: 30vh;
position: relative;
z-index: 300;
}
.icons {
margin-top: 1rem;
a {
padding: 0.4rem;
@include easeOut;
color: black;
&:hover {
color: #fff;
}
}
}
&#home {
overflow: hidden;
h1 {
margin-top: 20vh;
}
}
}<body id="bg-img">
<header>
<div class="fullscreen-video-wrap">
<video src="./img/code.mov" autoplay="true" loop="true"></video>
</div>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item current">
<a href="index.html" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">
How To Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="home">
<div class="custom-container">
<img class="rg-logo" src="./img/rg-logo.svg" alt="">
<!-- <h2 class="sm-heading">
Writer, Video Editor, and Web Developer
</h2> -->
<div class="icons">
<a href="#!">
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
</div>
</main>
<script src="js/main.js"></script>
</body>Please let me know if I am missing relevant information. Thanks so much!