====== Mettere un video come sfondo di un div ======
Autore: **//Fabio Di Matteo//** \\ Ultima revisione:  **//  03/07/2026 14:11   //**  // //

Io lo trovo molto brutto e poco rispettoso dell'hardware altrui, ma alcuni lo chiedono.

===== html =====
<code html>

<!-- video -->
<script>
function toggleVideo() {
  const video = document.querySelector('.bg-video');
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}
</script>
<div class="hero">
    <video autoplay muted loop playsinline class="bg-video">
      <source src="videos/video.mp4" type="video/mp4">
    </video>
    <div class="container content-video-home">
      <p>html vario</p>
      <button type="button" class="btn btn-outline-secondary" onclick="toggleVideo()">Play/Pause video</button>  
    </div>
</div>
<!-- fine video -->

</code>

===== Css =====
<code css>
.hero {
  position: relative;
  height: 100vh;
  weight: 100vw;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  /* top: 50%; */
  /* left: 50%; */
  /* min-width: 100%; */
  /* min-height: 100%; */
  /* width: auto; */
  /* height: auto; */
  /* transform: translate(-50%, -50%); */
  /* object-fit: cover; */

  /* object-fit: contain; */ 
  /* object-position: center; */
  z-index: -2;
  /* transform: translateZ(0); */
}
@media screen and (max-width: 600px) {
 .bg-video {
    object-position: center center;
    transform: translate(-30%, -30%) scale(0.40); 
 } 
 .hero{
   width:100%;
   height: 52vh;
 }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 80, 0.30);
  z-index: -1;
}

.content-video-home {
  /*position: relative;*/
  z-index: 1;
  color: white;
  margin-top: 50px;
  /* margin-left:30px; */
}
</code>