What is causing this html5 video glitch? - css

Question

I have an html5 video tag with a div that has a text caption overlayed and when you scroll in chrome, the text div disappears as it gets near the top or bottom of the screen fold. Sometimes it's as its nearing the top of the screen, sometimes the bottom. I think it depends where the video is on the screen when it's refreshed.
Anyone know what is causing this? I think this is pretty barebones markup.
codepen: https://codepen.io/sharpdesigner/pen/KRgQZZ
screen capture of the issue: https://imgur.com/a/Hn8DWkP
html
<section id="video-landing" class="hide-mobile">
<div class="container">
<div class="row">
<div class="col-md-6 video-caption">
<h1>Lorem ipsum dolor sit</h1>
<p class="big">Quisque varius erat et</p>
<p>Vivamus aliquam lectus est. Nulla vitae fringilla felis. Aenean id elit sit amet sem mattis bibendum eu a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div> <!-- /container -->
<video muted autoplay="autoplay" loop="loop" id="bgvid">
<source src="http://www.mysportresume.com/phone.mp4" type="video/mp4" />
</video>
</section><!-- #section -->
css
body {
height: 2000px;
margin-top: 500px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
section#video-landing, section#video-landing-mobile {
background: url('../images/video-bg.jpg') no-repeat 0 -175px;
background-size: cover;
}
section#video-landing .row, section#video-landing-mobile .row {
margin: 0;
position: relative;
}
.video-caption {
position: absolute;
max-width: 550px;
top: 165px;
top: 8.5vw;
left: 0;
z-index: 99;
}
.video-caption h1, .video-caption p {
color: #000;
text-align: left;
}
.video-caption h1 {
font-size: 53px;
font-weight: 600;
}
.video-caption p.big {
margin: 0 0 30px;
max-width: 400px;
}
.video-caption p {
font-size: 17px;
}
p.big {
color: #000;
font-size: 27px !important;
font-weight: 300;
line-height: 1.5;
max-width: 850px;
margin: 0 auto;
}
video {
padding-top: 50%;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-55%);
width: 100%;
}
#video-landing, #video-landing-mobile {
width: 100%;
padding-bottom: 30%;
position: relative;
overflow: hidden;
color: white;
}
#video-landing .container, #video-landing-mobile .container {
max-width: 1140px;
}
#video-landing video, #video-landing-mobile video {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}