Boostrap container- fluid won't scroll on the iPad

HTML-CSS
1

So I have a full width header background with a video and an image overlay using bootstrap, but it doesn’t seem to be scrollable on the iPad, a further issue is that the video is far too wide.

The HTML:

              <div id="header-slider">
                  <div class="header-text container">
                      <h1>See, understand and  <br> mitigate your risk</h1>
                      <p>A new approach to risk management</p>
                  </div>
             
                    
                <div class="header-links container">
                  
                  <div class="watch-video-container" onclick="openModal()"><button class="watch-video float-left"><a href="#" class="inline-link">Watch Video</a></button><a href="#"><div class="play-bg float-left"><img src="assets/play.svg" alt="Play Button"></div></a></div>
                  
                  <!--      START VIDEO LIGHTBOX -->
                  <div id="video_lightbox"  onclick="closeModal()">
                    <div class="video_container">
                    <div style="padding-top: 56.25%; position: relative; overflow: hidden;"><iframe frameborder="0" allowfullscreen="" scrolling="no" src="https://onelineplayer.com/player.html?autoplay=false&loop=true&autopause=false&muted=false&url=https%3A%2F%2Fvimeo.com%2F320475419%2F1ba805ca7e&poster=&time=true&progressBar=true&playButton=true&overlay=true&muteButton=true&fullscreenButton=true&style=light&logo=false&quality=1080p" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;"></iframe></div>
                    </div>
                  </div>
                  
                  <!--      END VIDEO LIGHTBOX              -->
                  
                  <div class="bg-video">
                    <div class="overlay"><img src="assets/hero_iamge_overlay.svg" alt="" class="overlay-svg"></div>
                    <video id="player" src="assets/sample-header-bg.mp4" autoplay loop muted class="background-vid"></video>
                   </div>
                  
                  
                </div>
              </div>

css:

/*  HEADER BG VIDEO*/
.bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -999;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.overlay img {
  position:absolute;
  left:0;top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index: 1;
  opacity:.9;
}

#header-slider {
  max-height: 600px;
  overflow: hidden;
}

.header-text {
    margin-top: 140px;
    z-index: 3;
    position: relative;
}

.header-text h1 {
    font-family: "LL Circular Bold Web", futura, verdana, helvetica, arial, sans-serif;
    font-size: 56px;
    color: white;
    letter-spacing: -.8px;
    line-height: 62px;
}

.header-text p {
    font-size: 18px;
    margin-top: 20px;
    color: #BEC4CE;
}

.header-links {
    margin-top: 140px;
}

Its probably easiest to see this live: https://codepen.io/LukaDadiani/project/live/4706cda81d805a98ed45073ca0eb0fd1/AmOnqW/

based on my research this is due to z-index, absolute positioning and hidden overflow:

However after trying to set the overflow to touch the issue was not resolve

Thanks in advance and apologies if I am ignoring something really basic