iframe in background with z-index, no menu controls?

Question

I am developing a webpage which puts an iframe as a background due to other div elements "playing with it". Using z-index, it is in the background area, visible, but i need to be able to control it, and the controls that are usually present are missing. Here's the main code:

Here's the html:

<div class="bg-about">
  <iframe src="https://player.vimeo.com/video/54960454?title=0&amp;byline=0&amp;portrait=0;autoplay=1"></iframe>
  <div id="iframe"></div>
</div>

Here's the css:

iframe {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#iframe {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

Any ideas? I really need the controls. Note: the background is not actually behind anything, but due to formatting, it must be in a background. And I'm not sure why its displayed wrong.

Answer 1

You are covering the video with the #iframe, so you can't rollover video to view controls. I just swapped the z index of video to 2 and #iframe to 1. You were just covering video with div by mistake.

iframe {
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 #iframe {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
}

here is link: https://jsfiddle.net/keinchy/asga90Lg/