Video cropping on horizontal mobile view

Hello! I just launched a site for a client, and post-launch, we realized the video has a massive crop on both sides when viewing the site on our mobile device and turning the phone horizontally. I'm hoping someone can assist. 

Please see the images attached. I've labeled them desktop view, vertical mobile view, and horizontal mobile view (the issue). 
Is there a solution to this? 

You have a code in Page Header or Code Injection caused this. Use this (Design > Custom CSS) to override it

@media screen and (max-width:767px) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 35vh !important;
}
}

Hi! Thank you so much for the response. I deleted the page header code injection and plugged in your code...unfortunately, this didn't work for when you turn the phone horizontally (see screenshot). 

The rest of the site rotates and adjusts fine (see 2nd attachment), but the video in the header section crops inward. 

I've designed other sites, where I've used a video as the background to my header section and I've had no issues. Any ideas? Thoughts on how to fix this? Is it the video itself? 

I appreciate your help!

With horizontal mode, try this new code

@media screen and (max-width:767px) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 35vh !important;
}
}
@media screen and (max-width:767px) and (orientation:landscape) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 45vh !important;
}
}