Bonjour, 

j'ai un petit soucis sur une page d'un site web, 

j'ai une video en mp4 qui est mise sur la page d'accueil et qui prend toute la page en largeur / hauteur 

j'aimerai insérer un block en bas de la video mais je ne sais pas comment faire 

  <section id="movie">
      <div class="homepage-hero-module">
    <div class="video-container">
      <div class="filter"></div>
      <video autoplay loop class="fillWidth">
        <source src="{{ asset('video/BK-club.mp4') }}" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
        <source src="{{ asset('video/BK-club.webm') }}" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
      </video>
      <div class="poster hidden">
        <img src="{{ asset('video/BK-club.jpg') }}" alt="Club football">
      </div>
    </div>
  </div>
    </section>

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
  }

  .no-video .video-container video,
  .touch .video-container video {
    display: none;
  }

  .no-video .video-container .poster,
  .touch .video-container .poster {
    display: block !important;
  }

  .video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
  }

  .video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
  }

  .video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
  }

  .video-container video.fillWidth {
    width: 100%;
  }

Pouvez vous m'aider ? 

Merci d'avance

Bonjour,

Et bien je te dirais bien d'allouer 100vw et 100vh à id="movie"

80vh à video-container et 20vh à ton block, le problème que tu risque de rencontrer c'est le ratio hauteur, largeur.

Mais c'est simpliste de dire çà je n'ai pas testé ton code, tu tourne avec bootstrap ?

-
Edité par exen 11 août 2018 à 13:06:50

Je tourne avec bootstrap oui 

C'est marrant j'ai passé ma journée d'hier à lire la doc de bootstrap 4.

Ce serrais possible d'avoir le code complet de ta page en me précisant si tu tourne sur le 3 ou le 4 ?

Tu peut même me la passer en MP.

Edit : Tiens la c'est sous bootstrap4 comme je faisait des testes dessus j'en ai profité pour prendre à droite et à gauche pour bidouiller un truc.

.blockv {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.blockv video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.blockv .container {
  width: 100%;
  height: 20vh;
  margin-top: 80vh;
  padding-left: 0;
  padding-right: 0;
  background-color: grey;
  opacity: 0.7;
  position: relative;
  z-index: 2;
}

.blockv .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  .blockv {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  .blockv video {
    display: none;
  }
}

<div class="blockv">
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="asset/video/BK-club.mp4" type="video/mp4">
  </video>

  <div class=" container col-12 ">
    <div class="d-flex text-center h-100">
      <div class="my-auto w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <h2>With HTML5 Video and Bootstrap 4</h2>
      </div>
    </div>
  </div>
</div>

-
Edité par exen 11 août 2018 à 18:33:16