Header being out of container (shrinking) when zooming

Hi everyone. I have a question in regard of a container that is shrinking when zooming.

I dont know what to do since I am using video on the container and not an image.

This head is copied from a third party snipped is working fine but I dont know what is the best approach to solve it.

Here is the link for the application:

  <div class="overlay">
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="{% static 'videos/yoga.mp4' %}" type="video/mp4">
    <div class="container3 h-100">
      <div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1800" class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white for-wide-screen">
          <h2 class="display-4 font-weight-normal">The best wellness retreats.</h2>
          <!-- row -->
          <div class="row d-flex justify-content-center">
            <div class="col-md-6">
              <!-- Search form -->
              <form action="{% url 'search' %}" method="GET" class="header__search">
                <div class="input-group search-input">
                  <!-- Change the search input phrase here -->
                  <input type="text" name="q" placeholder="Search" class="form-control">
                  <div class="input-group-append">
                    <button class="btn btn-warning" type="submit" name="button"><i class="fas fa-search"></i></button></div>
            <!--/ Search form -->
        <!-- row -->


header {
  position: relative;
  white-space: nowrap;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;

header video {
  position: absolute;
  top: 65%;
  left: 65%;
  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%);

header .container3 {
  position: relative;
  z-index: 2;

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;