Embedded iframe video overlap the fixed navbar while Scrolling - html

Question

I'm a complete beginner in programming. Currently working on a Product landing page. I embedded a video from youtube using an iframe and made my navbar fixed at the top. While scrolling down the video is sliding over the navbar. What should I do to make the video scroll down the navbar like the rest of the page content?
Here is the code of HTML file:
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>
CSS code of navbar:
#header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
CSS code for iframe:
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
}
Thanks in advance

Answer 1

z-index on Header And Video
You have missing code <header> in your above code. Also, there is no ID for the header as it's not there, so I've added the missing code and added the header style as the CSS HTML element header.
I've added a z-index of 0 to .videoWrapper iframe and a z-index of 1 to header I also added a light grey background to your header so you can see the result better.
What is a z-index?
The z-index is how you determine the layer order in the box model of HTML. The higher the number, the higher on top it is.
Hope this helps and good luck with your project :)
<style>
header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
z-index:1;
background:#ddd;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
z-index:0;
}
</style>
<header>
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>

Answer 2

In your CSS, add z-index property. Here is a reference for this proprety.
#header {
position: fixed;
top: 0;
left: 0;
z-index: 99;
margin: auto;
width: 100%;
}