Boostrap container- fluid won't scroll on the iPad

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.


              <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 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="" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;"></iframe></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>


.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 {
  z-index: 1;

#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:

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