remove header from mobile only and stop video from cropping

hello.   site - https://icosahedron-rust-7ftd.squarespace.com

I would like to:

1. Remove header on mobile only so that the logo and hamburger are hidden completely.  Video should be the only thing show on top. 

2. Stop video from cropping. 

If anyone can help it would be greatly appreciated.  I have tried some snippets in DESIGN --> Custom CSS without luck. 

You can remove the header on mobile with the code below. Just add it to your custom css. 

Your video is setup as a background video so it's designed to fill the entire space, which results in the cropping. While it will still be cropped a little, you should be able to click the phone icon in the top right corner of your website to edit the mobile view and increase the size of your grid so the video presents itself better. I've included a screenshot of the icon I am talking about if you're not familiar with it.

@media screen and (max-width:799px) {
    .header-announcement-bar-wrapper {
        display: none !important;
    }
}