Vidéo avec poster + play

<style>
.bn-video {
  position: relative;
  max-width: 700px;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-video__el {
  width: 100%;
  display: block;
  border-radius: 4px;
  background: #000;
}

.bn-video__play {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.4);
  background: rgba(5, 8, 8, 0.6);

  color: #E6E4DD;
  font-size: 1.1rem;
  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.3s ease;

  --fx-glow: none;
  box-shadow: var(--fx-glow);
}

.bn-video.fx-glow .bn-video__play {
  --fx-glow: 0 0 40px 6px rgba(230, 228, 221, 0.25);
}

.bn-video__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Le bouton disparaît une fois la vidéo lancée (classe posée par
   script.js à l'écoute de l'événement "play" de la vidéo) */
.bn-video__el.is-playing ~ .bn-video__play {
  opacity: 0;
  pointer-events: none;
}

.bn-video__caption {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bn-video__caption strong {
  color: #E6E4DD;
  font-size: 0.95rem;
}

.bn-video__caption span {
  color: #979793;
  font-size: 0.8rem;
}

</style>

<div class="bn-video" data-fx-root>
  <!-- Remplace le "poster" par ta vraie image de couverture, et
       ajoute ta source vidéo dans la balise <source> -->
  <video class="bn-video__el" poster="https://placehold.co/900x500" preload="none" playsinline>
    <source src="" type="video/mp4" />
  </video>

  <button class="bn-video__play" type="button" aria-label="Lire la vidéo">▶</button>

  <div class="bn-video__caption">
    <strong>Entre ombre et silence</strong>
    <span>Exploration visuelle et sonore</span>
  </div>
</div>


<script>
/* ==========================================================
   VIDÉO AVEC POSTER + BOUTON PLAY
   Le bouton play déclenche la lecture de la vidéo, et se cache
   automatiquement dès que la lecture démarre (classe "is-playing"
   posée sur la vidéo). Il réapparaît si la vidéo est mise en pause
   ou arrive à sa fin.
   ========================================================== */

(function () {
  const root = document.querySelector('.bn-video[data-fx-root]');
  if (!root) return;

  const video = root.querySelector('.bn-video__el');
  const playBtn = root.querySelector('.bn-video__play');

  playBtn.addEventListener('click', () => {
    video.play();
  });

  video.addEventListener('play', () => video.classList.add('is-playing'));
  video.addEventListener('pause', () => video.classList.remove('is-playing'));
  video.addEventListener('ended', () => video.classList.remove('is-playing'));
})();

</script>