.wrapper {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
}

.video-area {
  position: absolute;
  top: 27.2%;
  left: 52.82%;
  transform: translate(-50%, -50%);
  text-align: center;
}

video {
  width: 90%;
}

@media (max-width: 1440px) {
  .wrapper {
    max-width: 100%;
  }

  video {
    width: 90%;
  }
}

@media (max-width: 1024px) {
  video {
    width: 350px;
  }
}

@media (max-width: 768px) {
  video {
    width: 330px;
  }
}

@media (max-width: 675px) {
  video {
    width: 280px;
  }
}

@media (max-width: 575px) {
  video {
    width: 247px;
  }
}

@media (max-width: 475px) {
  video {
    width: 210px;
  }
}

@media (max-width: 425px) {
  video {
    width: 210px;
  }
}

@media (max-width: 415px) {
  video {
    width: 170px;
  }
}

@media (max-width: 375px) {
  video {
    width: 175px;
  }
}

@media (max-width: 340px) {
  video {
    width: 155px;
  }
}