As a beginner in front-end development, I decided to challenge myself by creating a web portfolio from scratch. To personalize my landing page, I wanted to use my video editing reel as the background, but for some reason, it just wouldn't work. Even with the help of a friend who is an experienced front-end developer, we couldn't figure out why the video always appeared in front of my logo and buttons. It seems like no matter what approach we tried, whether adjusting z-index or adding relative positioning, the issue persisted.
One factor that complicates things is my use of sass, which I am still learning. I suspect that there might be something in the sass code conflicting with the layout of the video/logo. Alternatively, there could have been a mistake in how I structured the HTML elements. At this point, I'm at a loss and would appreciate any insights on resolving this issue. Here is the link to my repository: https://github.com/rkgregory/modern_portfolio-master.
Below is a snippet of 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;
}
// ... <body id="bg-img">
<header>
<div class="fullscreen-video-wrap">
<video src="./img/code.mov" autoplay="true" loop="true"></video>
</div>
// ...
</main>
<script src="js/main.js"></script>
</body>If you notice anything crucial that I might have overlooked, please don't hesitate to share your thoughts. Thank you!