CSS z-index glitchy layers - html

Question

I'm creating a landing page with an embedded video background so I've assigned its z-index lower than that of the navigation bar, the footer, etc. But when I do so, the layers on top of the video are very glitchy meaning they sometimes don't show up. I thought I could resolve this glitch by assigning the video a negative z-index. This works and solves the glitching problem, but the video layer becomes un-clickable. Not sure what the problem is, really appreciate the help.
HTML:
<nav>
<ul style="display: inline-block; padding-top: 15px; padding-bottom: 10px; padding-left:20px; padding-right:30px;">
<a href="{{store_url}}">
{{#logotype}}
<img src="{{url-2000}}" alt="{{store_name}}">
{{/logotype}}
</a>
</ul>
<ul style="display: inline-block;">
<li>All
</li>
<li>Men
</li>
<li>Women
</li>
</ul>
</nav>
<div id="bg_container">
<iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=opaque&autoplay=1&rel=0&controls=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
#bg_container {
height:700px;
overflow:visible;
}
#bg {
width:100%;
height:1200px;
position: fixed;
top: -50%;
z-index:1;
}
#content {
position:absolute;
top:0px;
padding:30px;
color:#FFF;
text-shadow:#000 2px 2px;
}
.transparent {
background-color:rgba(0, 0, 0, 0.8);
position: relative;
z-index:10;
}
.nav {
background-color:rgba(0, 0, 0, 0.5);
position: relative;
z-index:10;
}

Answer 1

Check out the code snippet below and this fiddle.
#bg_container {
height:700px;
overflow:visible;
z-index:0;
}
#bg {
width:100%;
height:1200px;
position: fixed;
top: -50%;
}
#content {
position:absolute;
top:0px;
padding:30px;
color:#FFF;
text-shadow:#000 2px 2px;
z-index:1;
}
nav {
background-color:rgba(0, 0, 255, 0.5);
position: relative;
}
ul {
display: inline-block;
}
.logo {
height:30px;
}
<div id="bg_container">
<iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=transparent&autoplay=1&rel=0&controls=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content">
<nav>
<ul>
<img class="logo" src="https://chillix.files.wordpress.com/2009/10/android-logo-small.gif" alt="android" />
</ul>
<ul>
<li>
All
</li>
<li>
Men
</li>
<li>
Women
</li>
</ul>
</nav>
</div>