Video Header unresponsive

I’m having trouble figuring out how to fix my video header on my WordPress homepage. I am using the Ascension Theme. I have input some Additional CSS, but my video is embedded from Youtube and will not resize correctly with different screen sizes or for mobile viewing. Does anyone please have any advice or help on how I may be able to resolve this issue?
The additional css that I have included is:

#masthead {
padding-top: 15px !important;
padding-bottom: 0px !important;
}

.site-header .custom-logo {
  width: 200px;
  max-height: 100%; }
  @media only screen and (min-width: .063em) {
    .site-header .custom-logo {
      max-height: 80px; } }
  @media only screen and (min-width: 61.063em) {
    .site-header .custom-logo {
      max-height: 100px; } }

.primer-hero-text-widget {
   width: 85%;
   max-width: 975px;
   margin: 0 auto;
   text-align: right;
	font-weight: 800;
	padding: 6% 0px;
}

@media only screen and (min-width: 0em) {
   .home .hero aside {
      padding: 0;
		 
   }
}

• This topic was modified 6 years, 5 months ago by Steven Stern (sterndata).

The page I need help with: [log in to see the link]