1

Estoy editando una página de bootstrap añadiéndole entre otras cosas un video de fondo. Una vez lo coloco la parte "Cover" con los textos se siguen viendo, pero sin embargo la parte del Nav la tapa completamente. He probado con z-index y overflow-hidden pero no me sale.

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  font-family: 'Open Sans', sans-serif;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;

}
<body class="text-center">

        <video autoplay muted loop id="myVideo">
                <source src="myvideo.mp4" type="video/mp4">
              </video>

    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <nav class="nav nav-masthead">
            <a class="nav-link" href="#">Start here</a>
            <a class="nav-link" href="#">Programs</a>
            <a class="nav-link" href="#">Events</a>
            <a class="nav-link" href="#">About</a>
            <a class="nav-link" href="#">Contact</a>
            <a class="nav-link active" href="#">Login</a>
          </nav>
        </div>
      </header>

      <main role="main" class="inner cover">
            <i class="fas fa-cloud-sun"></i>
        <h1 class="cover-heading">fleshair</h1>
        <h2 class="subcover">Development. Trusted.</h2>
        <p class="lead">Flesh Air Is Creating Retires Across All Europe That Delivers Transformational Personal Devlopment For All Ages. Powered By Community. Fueled By Trust.</p>
        <p class="lead">
          <a href="#" class="btn btn-lg btn-secondary">Start Here</a>
        </p>
      </main>

      <footer class="mastfoot mt-auto">
        <div class="inner">
          
        </div>
      </footer>
    </div>

No lo entiendo por qué si ambas secciones están estructuradas de la misma manera por que el video tapa el nav pero el texto no?

1 respuesta 1

2

He probado esto y me ha funcionado.

#myVideo {
  z-index: -1;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;

}

1
  • 1
    En realidad solo con darle el z-index estaria bien Commented el 10 feb. 2019 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.