Simply incorporate a position element into your content. I've set it to absolute for use with your example, but you can also use relative if the parent is positioned in absolute. Then adjust the content placement to be 70% from the top.
If you want your header to overlay your content when scrolling, consider setting its z-index value to 100 (although 10 or even 1 could work as well).
.container-fluid{
padding:0;
}
/* Styles for the header section */
.header{
background: #000;
position: fixed;
z-index: 100; /* Ensures the header overlaps everything else */
top: 0; right: 0; bottom: 0; left: 0;
height: 70%;
overflow: hidden;
}
.vid-container, .header iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: -1;
}
.header-text{
color:white;
z-index:1;
}
.row {
color: red; /* Debugging purposes */
}
/* Positioning the content absolutely and setting the top coordinate to match the header's height */
.row {
position: absolute;
top: 70%;
}
/**/
@media (min-aspect-ratio: 16/9) {
.vid-container { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.vid-container { width: 300%; left: -100%; }
}
link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body class = "container-fluid">
<div class="header">
<div class="vid-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/DXA3JYdFKAE? controls=0&showInfo=0&rel=0&autoplay=1&loop=1&playlist=DXA3JYdFKAE&start=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="header-text">
<h1>Welcome</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 feature">
<i class="fas fa-check-circle orange-tick"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="col-lg-4 feature">
<i class="fas fa-bullseye target"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="col-lg-4 feature">
<i class="fas fa-heart heart"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
In any case, you might want to experiment with using position:absolute instead of fixed. Let me know if that achieves the desired effect.