How to make HTML Video Background with Text Overlay responsive - css

Question

I can't make my Background Video with overlay & Text responsive.
Decrease Resolution width the text does not scale down, but gets cut off by the overflow hide option i believe.
Does not help if i remove the font size parameter
Also, if i try on Safari the Video does not minimize well or at all
result is, that page is cut off on the right side.
The idea is www.fc-squad.de the picture in the middle should be replaced by a video. While the page is not really responsible, its ok with Pictures only.
p.S: probably i messed up alot code, by trial and error paste code, delete if result wasnt good
/* ViDEO Background Section */
.callout {
position: relative;
overflow: hidden;
margin: 20px 20px 20px 20px;
min-width=600px:
}
/* Style of the the video */
#myVideo {
height: auto;
width: auto;
vertical-align: middle;
width: 100%;
height: 100%;
border: 1px solid slategrey;
border-radius: 5px;
display:inline-block;
overflow: hidden;
z-index: -1000;
}
/* some content over the video */
.content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
color: #f1f1f1;
width: 100%;
height: 100%;
vertical-align: middle;
text-align:center;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 3px #272D0B;
}
<section class="callout">
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="squad-alpha11.mp4" type="video/mp4">
</video>
<!-- some overlay text to describe the video --!>
<div class="content">
<span style="font-size:36px"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:28px"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:20px"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:18px"><h4>TEXT TEXT TEXT</h4>
<a class="button" href="url-to-topic">Call to Action</a>
</div>
</section>
Update:
Great, Text is working much better
small and larger window (Firefox), see here video container small resolution and video container medium resolution
But The Video and the whole DIV Section has issues on Safari/iOS... yes the page is generally not optimized, but it was rendering pictures down alteast
But the video is cut off, not playing auto (you must klick play)and text is below not as overlay. Safari screen
I've read its better to make a static picure for small screens, or is there an easy fix for Safari?

Answer 1

If the issue is just the text not resizing you may want to try use vw instead of px, that scales down based on view width.
replace your text spans with:
<span style="font-size:4vw"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:3.2vw"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:2.2vw"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:1.7vw"><h4>TEXT TEXT TEXT</h4>
let me know cause i didn't understand if also the video itself has issues.

Answer 2

used update for information - for better searchability
Text scales now on small resolution
works also on medium
But still issue on Safari
Safari Cut of Video