Jump to content

resizing background video for mobile

Recommended Posts

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;
    }
}

 

image.thumb.jpeg.0fd0e237fce78b2842913bf44eff1cf3.jpeg

 

Link to comment
  • Replies 5
  • Views 966
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
    }
}

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.