Sense theme video with text overlay ISSUE on mobile.

[talsworld]

I have been desperately trying to play with my code to use a different video source on mobile, and nothing is working. Here is my code: 

<div class="video-container">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/4bdae5090a8f4dfd9af652de89580826.mov" type="video/mp4">
</video>
<div class="overlay">
<div class="text-block">
<div class="title"><b>We reinvented juicing.</b></div>
<div class="subtitle">Unlock the energy, gut health, and immune support your body deserves.</div>
<div class="button-section">
<a href="https://www.coldpow.com/collections/shop-all" class="button" style="color: black;">SHOP NOW</a>
</div>
</div>
</div>
</div>
<style>
.video-container, .video-container video {
width: 100%;
}

.video-container {
position: relative;
overflow: hidden;
}

.video-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}

.overlay {
position: absolute;
top: 48%;
left: 10%;
transform: translate(0%, 0%);
text-align: left;
color: white;
}

.container {
width: 100%; /* Set the width of your container */
}
.title {
font-size: 3em;
line-height: 0.8em;
}

.subtitle {
font-size: 1em;
line-height: 0.5em;
}

.button-section {
margin-top: 4vh;
}

@media (max-width: 600px) {
.title {
font-size: 2em;
line-height: 1;
}

.subtitle {
font-size: 1em;
line-height: 1.5;
}
.button-section {
margin-top: 2vh;
}

.text-block {
max-width: 300px;
margin: -110px auto 0; /* Set left and right margins to "auto" and add a top margin of -20px */
padding: 0;
}
}
</style>

WHY is this not working?

Site: coldpow.com

Pass: 24coldp