Fit Background Video on Mobile

Site URL: https://pte.squarespace.com/

password: Party

Hello, 

We have a background video as the hero section for our home page and I'm not sure how to fit it for mobile. I've tried a couple of ways, but I couldn't get it to work. It has a 16:9 aspect ratio and I believe the longest side is 2000 pixels. 

Thanks,

Patrick

First, edit this CSS

section[data-section-id="611282352e5bfe168df6dbfd"] {
    width: 100% !important;
    height: 100vh !important;
}

to this

@media screen and (min-width:992px) {
section[data-section-id="611282352e5bfe168df6dbfd"] {
    width: 100% !important;
    height: 100vh !important;
}
}

Next, add this CSS

/* resize home top video mobile */
@media screen and (max-width:767px) {
    [data-section-id="611282352e5bfe168df6dbfd"] video {
        width: 100% !important;
        height: auto !important;
        left:0 !important;
    }
     [data-section-id="611282352e5bfe168df6dbfd"] {
         min-height: unset !important;
         height: 30vh !important;
     }
}

Hey @tuanphan

Thanks for the help!

I have a few bugs regarding the background video that I hope you'd be able to help with. 

1. How can I get rid of that extra blue space that shows up below the video? This was one of the issues I was running into when trying to work this out myself. 

2. When I rotate my phone the video gets cropped. Is there a way to prevent that?

3. Can we scoot the video down to leave space for the Part Time Evil header?

Thanks,

Patrick

password: Party

#1. Try reduce number 30

#2. change 767 to 991

#3. You mean black header + move video under header?

This works until the section id dynamically changes. Any way to make this resizing stick?