How to set z-index on a embedded vimeo-video in rails?

Question

I embedded a vimeo video into a website and made it responsive successfully. The navigation-bar stays on top of the screen (position: fixed;) and is transparent (opacity: 0.8). The issue is when I scroll down, the embedded video is not under the layer of the navigation bar instead its on top. If I use z-index on ".vimeo-wrapper iframe { z-index: -1; }" then it looks perfectly but I can't play the video. (See Pictures)

Question: How can I set it under the navigation-bar while ensuring the functionality of the player? (See picture)

Without z-index - player works but no overlapping on navigation bar:

With z-index - player does not work but overlapping on navigation bar:

HTML - Embedded Vimeo Video

<div id="container-block">
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/159434479" width="1600" 
    height="900" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

CSS - Embedded Vimeo Video

#container-block {
  position: relative;
  width: 100%;
  max-width: 570px;  /* 16:9 ratio */
  max-height: 320.625px; /* 570 / 16 * 9 */
  display: block;
  margin: 80px auto 70px auto;
}

.vimeo-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.vimeo-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML - Navigation

<nav>
  <ul>
    <% if logged_in? %>
      <li><%= link_to "IOAKA", dashboard_path, :class => "logo" %></li>

      <% flash.each do |message_type, message| %>
        <div id="<%= message_type %>">
          <div class="flash"><%=message %></div>
        </div>
      <% end %>

      <div class="icon">
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :id => "ioaka_icon2"), dashboard_path) %></li>
        <li><%= link_to(image_tag("icon_settings.png", 
        alt: "geometry settings icon", :id => "settings_icon"), 
        edit_user_path(current_user)) %></li>
        <li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon",
        :id => "logout_icon"), logout_path, method: "delete") %></li>
      </div>

    <% else %>
      <li><%= link_to "IOAKA", root_path, :class => "logo" %></li>

      <li>
      <% flash.each do |message_type, message| %>
        <div id="<%= message_type %>">
          <div class="flash"><%=message %></div>
        </div>
      <% end %>
      </li>

      <div class="icon">
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :id => "ioaka_icon1"), root_path) %></li>
        <li><%= link_to(image_tag("icon_signup.png", 
        alt: "geometry signup icon", :id => "signup_icon"), signup_path) %></li>
        <li><%= link_to(image_tag("icon_login.png", alt: "geometry login icon", 
        :id => "login_icon"), login_path) %></li>
      </div>
    <% end %>
  </ul>
</nav>

CSS - Navigation

ul {
  list-style-type: none; 
  margin: 0 auto; 
  padding: 0 23px; 
  text-align: center; 
  max-width: 1920px;
}

li {
  display: inline;
}

a:link {
  text-decoration: none;
}

a:active {
  color: #fc5354;
}

nav {
  width: 100%;
  height: 66px;
  line-height: 56px; 
  background-color: white;
  border-bottom: #cfcfcf 3px solid;
  position: fixed; 
  opacity: 0.80;
}

.logo {
  float: left;
  font-family: cocomat_light-trial, sans-serif;
  color: #009fe3;
  font-size: 32px;
}

.icon {
  float: right;
  width: 200px;
}

#ioaka_icon1 {
  height: 48px;
  padding-top: 9px; 
  padding-right: 35px; 
}

#ioaka_icon2 {
  height: 48px;
  padding-top: 9px; 
  padding-right: 35px; 
  vertical-align: top;
}

#settings_icon {
  height: 42px;
  padding-top: 12px; 
  padding-right: 32px; 
  vertical-align: top; 
}

#logout_icon {
  height: 50px;
  padding-top: 8px;
}

#signup_icon {
  height: 42px;
  padding-top: 11px; 
  padding-right: 32px; 
  vertical-align: top;
}

#login_icon {
  height: 48px;
  padding-top: 9px; 
}