resizing background video for mobile

Hello,

I've checked other discussions, but am still having issues resizing the background video on my splash page for mobile. Two issues, first, my code isn't working, and second -- there's a strange white bar appearing under the video that I'm unable to remove. I adjusted the color settings for that section but the BG is still looking white rather than the same off-white off the footer. Anyone able to help me figure out how to adjust dimensions for mobile? Many thanks! site is alexandra-geller.com

@media only screen and (max-width: 767px) {
    section[data-section-id="65ac39e0d5147a5718dcd805"] video {
        width: 100% !important;
        height: 80% !important;
        left: 0 !important;
        top: 0 !important;
    }

   section[data-section-id="65ac39e0d5147a5718dcd805"] {
        min-height: 30vh !important;
    }
}

Height of video + footer < height of mobile screen, so it will create gap. To remove gap, you will need to increase video height or footer height

or change white color to footer color. You can use this code to Website > Website Tools > Custom CSS

body.homepage {
    background-color: #f6f6f4;
}

Thanks for your help @tuanphan, this worked to remove the color bar. And are you able to weigh in on what's going on with my code? It's for some reason not resizing the video to horizontal on mobile. 

On 3/14/2024 at 9:08 AM, Alexg77 said:

Thanks for your help @tuanphan, this worked to remove the color bar. And are you able to weigh in on what's going on with my code? It's for some reason not resizing the video to horizontal on mobile. 

Can you share link to homepage?

Yes! It's https://www.alexandra-geller.com/ Thanks @tuanphan

Here was my code: 

@media only screen and (max-width: 767px) {
    section[data-section-id="65ac39e0d5147a5718dcd805"] video {
        width: 100% !important;
        height: 80% !important;
        left: 0 !important;
        top: 0 !important;
    }

   section[data-section-id="65ac39e0d5147a5718dcd805"] {
        min-height: 30vh !important;
    }
}

On 3/16/2024 at 3:08 AM, Alexg77 said:

Yes! It's https://www.alexandra-geller.com/ Thanks @tuanphan

Here was my code: 

@media only screen and (max-width: 767px) {
    section[data-section-id="65ac39e0d5147a5718dcd805"] video {
        width: 100% !important;
        height: 80% !important;
        left: 0 !important;
        top: 0 !important;
    }

   section[data-section-id="65ac39e0d5147a5718dcd805"] {
        min-height: 30vh !important;
    }
}

In your code

change

video

to

iframe