Using 100vh for responsive video centered on the screen?

Question

I need this video to be placed centered based off of the screen size/viewport (100vh) but I'm always having the video being placed at the very top and can never have it centered.

How can I achieve a video placed at the center of the screen size using 100vh and also make it responsive?

I've learned how to move a video centered on a screen and having it responsive, but all of those examples are not using a height of 100vh and those methods don't work for me.

Whenever I try to move it more centered, it clips/overflows the about header below it and whenever I resize it using percentages rather than pixels, it becomes unresponsive. (I'm using a JavaScript code to help make the video responsive)

<div class="demo">
  <div class="main-header">
    <header>
      <ul>
        <li><a href="#top">Demo Reel</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </header>
  </div>
  <div class="yt-video">
    <div class="yt-link">
      <iframe src="https://www.youtube.com/embed/p5ucijrQkMk?si=5m0i43hPQtMYVHwS" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
 encrypted-media;
gyroscope;
picture-in-picture;

web-share" allowfullscreen>
      </iframe>
    </div>
  </div>
</div>
<div class="about">
  <div class="about-header">
    <header id="about" class="header-length">
      <ul>
        <li>About</li>
        <li>More info</li>
      </ul>
    </header>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>jQuery(document).ready(function () {
    jQuery('.yt-video').fitVids();
  });
</script>

* {margin:0; padding:0; box-sizing: border-box} 

header li{
    margin-top:6px;
}

.main-header{
    position:fixed;
    top:0;
    left:0;
    z-index:2;
    height:70px;
    background-color:#111111;
    width:100%; 
    border-bottom:1px solid #595959;
}

.main-header ul{
    display:flex;
    justify-content:space-around;
    align-items:center;
    color:white;
    font-family:'Aldrich';
    font-size:2.5em;
    list-style-type:none;
    margin-top:5px;
}

.main-header a{
    text-decoration:none;
}

.main-header a:link{
    color:white;
}

.main-header a:visited{
    color:white;
}

.main-header a:hover{
    color:#CDA5A5;
}

.main-header a:active{
    color:#CDA5A5;
}

.main-header a.lastclicked{
    color:#CDA5A5;
}

@media(max-width:943px){
    .main-header{
        position:static;
        margin-top:-15px;
    }

    .main-header li{
        margin-top:15px;
    }

    .main-header li:nth-child(2), li:nth-child(3), li:nth-child(4){
        display:none;
    }
}

.demo, .portfolio{
    height:100vh;
    background-color:#595959;
}

@media(max-width:1200px){
    .demo{
        height:auto;
    }
}

@media(max-width:943px){
    .portfolio{
        height:auto;
    }
}

.yt-video{
    max-width:1650px;
    margin:0 auto;
    background-color:#595959;
    padding:100px 40px 40px 40px;
}


@media(max-width:943px){
    .yt-video{
        padding:20px;
    }
}

iframe{
    width:1650px;
    height:700px;
}

.about{
    height:100vh;
    background-color:#2E2E2E;
}

@media(max-width:943px){
    .about{
        height:auto;
    }

    .contact{
        height:auto;
    }
}

.about-header, .portfolio-header, .contact-header{
    height:50px;
    background-color:#111111;
    width:100%; 
}

.about li:first-child{
    display:none;
}

.about-header ul, .portfolio-header ul, .contact-header ul{
    display:flex;
    justify-content:center;
    gap:1rem;
    color:white;
    font-family:'Aldrich';
    font-size:2em;
    list-style-type:none;
}

.header-length{
    scroll-margin:71px;
}

@media(max-width:943px){
    .about li:nth-child(2), li:nth-child(3), li:nth-child(4), li:nth-child(5), li:nth-child(6){
        display:none;
    }

    .about li:first-child{
        display:block;
    }
}