Section above the video, using toggle

Question

Section above the video, using toggle

Navigation

#1 by (0 votes)

0

I want to leave a video on the home page of the site I'm creating with HMTL and CSS, but when I click on any sidebar menu option, the section will transition over my video, leaving it in the background. But what is happening is the opposite. I left the html part of the header and iframe below, I looked it up and saw that it is a toggle function in javascript that I am missing. Someone help me?

<body><divid="IframePosicao">
    <iframe width="800" height="451" 
     src="https://www.youtube.com/embed/JMJUUHDhRcA"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> 
     </iframe>
  </div>

<header id="sidebar">
    <h1>NT GAMES</h1>
    <nav>
        <ul>
            <li id="link-home"><a href="#home">Home</a></li>
            <li id="link-empresa"><a href="#empresa">Empresa</a></li>
            <li id="link-servico"><a href="#servico">Serviços</a></li>
            <li id="link-contato"><a href="#contato">Contato</a></li>
            <li id="link-restrito"><a href="#restrito">Restrito</a></li>
        </ul>
    </nav>
</header>

css:
div#IframePosicao {
  position: absolute;
  overflow:auto;
  top: 30%;
  left: 45%;
  z-index: 5;
  margin-top: -155px;
  margin-left: -200px;
}

header{
    width: 25%;
    background: #fff;
    position: absolute;
    float: left;
    left: 0;
    top: 5%;
    z-index: 5;
}

div iframe video toggle

asked by anonymous 22.09.2018 / 04:01

1 answer

Get the executable directory and save image to a folder inside this directory With making a list point to another in C

score 0 · Answer 1

Hello! In this case, what is missing is probably an instruction regarding the order of the content layers on the page. This information is given through z-index . Try changing the following:

div#IframePosicao {z-index: -1;}
header{z-index: 5;}