h2 text won't appear ontop video - html

Question

The text wont display on-top of the video.
I am basically wanting a title which i called Heading to display overlaid on the video. I have tried fiddling with z-index and it does not change, i did notice when I replace the video for an image the text worked, that was using different css code, I am assuming their is a problem with the css.
Please help me, THANK YOU.
CSS CODE:
.home-subheading {
font-family: 'Montserrat',sans-serif;
font-size: 14px;
letter-spacing: .5px;
font-weight: 400;
color: #ccc;
z-index:999!important;
}
.tp-banner .home-subheading {
line-height: 40px!important;
#home-revolution-slider {
width: 100%;
height: 100%;
min-height: 100%;
z-index: -99;
}
.hero {
position: fixed;
z-index: -99;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
}
.content {
position: relative;
z-index: 3;
background-color: #fff;
}
.home-heading,
.home-subheading,
.home-button {
position: absolute;
z-index: 999;
text-align: center;
transform: translateY(0px);
/*-webkit-transition: 1s opacity ease-in-out;*/
}
.tp-loader.spinner1 {
width: 40px;
height: 40px;
background: url(../img/assets/rev-loader.gif) no-repeat center center;
background-color: transparent;
box-shadow: none;
-webkit-box-shadow: none;
margin-top: -20px;
margin-left: -20px;
-webkit-animation: none;
animation: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.tp-banner-container{
width:100%;
position:relative;
padding:0;
margin-top: 0;
z-index: -1;
}
.tparrows.preview4:after {
background: #fff;
background: rgba(255,255,255,.05);
}
.tp-caption a {
color: #fff;
padding: 9px 22px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-o-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
margin: 0 7px 0 7px;
text-transform: uppercase;
}
.tp-caption a:hover {
color: #fff;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
left: 0!important;
z-index: -99;
}
.tp-banner-video video{
min-width: 100%;
z-index: -3;
HTML CODE:
<!-- MAIN IMAGE -->
<video src="img/coding.mp4" autoplay loop alt="video_typing_cover" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="repeat"></video>
<!-- LAYERS -->
<!-- Home Heading -->
<div class="tp-caption sft"
data-x="center"
data-y="260"
data-speed="1200"
data-start="1100"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-endspeed="300"
style="z-index: 4; max-width: auto; max-height: auto; white-space:normal;">
<h2 class="home-heading op-1">Digital Hive</h2>
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-volume="mute"
data-forceCover="1"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 2;">
<video class="img-responsive" preload="none"
poster='example'>
<source src='img/coding.mp4' autoplay type='video/mp4' />
</video>
</div>