<section class="hero">
  <div class="container">
    <div class="hero-wrapper">
      <h1 class="hero-title">Video</h1>
    </div>
  </div>
  <div class="video-wrap">
    <video class="video" muted loop playsinline data-src="https://ia804709.us.archive.org/30/items/Starry_Sky_Time_Lapse/Stars%20DNXHD.mp4"></video>
    <!-- <video class="video" autoplay muted loop playsinline>
      <source src="https://ia804709.us.archive.org/30/items/Starry_Sky_Time_Lapse/Stars%20DNXHD.mp4" type="video/mp4" />
    </video> -->
    <picture class="video-preview-wrap">
      <source media="(max-width: 767px)" srcset="https://via.placeholder.com/400">
      <img class="video-preview" src="https://via.placeholder.com/800">
    </picture>
  </div>

</section>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
}
picture,
video {
  display: block;
}
html {
  min-height: 100%;
}
body {
  min-height: 100%;
  line-height: normal;
  color: #000;
}

.container {
  width: 100%;
  max-width: 1570px;
  margin: 0 auto;
  padding: 0 15px;
}

.hero {
  position: relative;
  height: 500px;
}

.container {
  height: 100%;
}

.hero-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 500px; */
  height: 100%;
}

.hero-title {
  font-size: 50px;
  color: beige;
  // text-align: center;
}

.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video {
  // position: absolute;
  // top: 0;
  // left: 0;
  width: 100%;
  height: 100%;
  // height: 500px;
  background-color: cyan;
  object-fit: cover;
  // visibility: hidden;  // это может помочь
}

.video-preview-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s;
}

.video-wrap.play .video-preview-wrap {
  opacity: 0;
  // visibility: hidden;  //  или вот это вместо opacity
}

.video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

let videoWrap = document.querySelector(".video-wrap");
let video = videoWrap.querySelector(".video");
let dataSrc = video.dataset.src;
video.src = dataSrc;

let playPromise;
playPromise = video.play();
console.log(playPromise);
if (playPromise !== undefined) {
  playPromise
    .then((e) => {
      console.log("then", playPromise);
      videoWrap.classList.add("play");
    })
    .catch((error) => {
      console.log("не загружается: " + error);
    });
} else {
  console.log("playPromise is undefined");
}