Mobile background video - resize for mobile

Site URL: http://www.edhopkinspr.co.uk

Hi, I'm new here so please accept my apologies if I have not posted this correctly. 

I have a background video on my site - It works perfect on a desktop but it doesn't display correctly on a mobile it is pinched in. I have read through over threads and tried lots of codes but nothing seems to work. Any help would be really apriecated. 

Many thanks in advance 

Ed 

Hi,

Add to Design > Custom CSS

/* Mobile-Homepage-Resize video */
@media screen and (max-width:767px) {
[data-section-id="62238c1fc3ff3d47e775de48"] video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="62238c1fc3ff3d47e775de48"] {
    min-height: unset !important;
    height: 300px;
}}

Thank you so much! Its worked. Im so so grateful! 

Site URL: jabberproductions.com

Page Working On: https://www.jabberproductions.com/podcast-editing

Hi, 

Wondering if I can have help with this. I made an animation on Canva for the "header" of each page of my website. I made it to fit on web view but wondering how I add a second video to fit for the mobile view. When going to add another video like the other threads say, it says that I can only replace the video. Sorry if this has been answered before 

9 hours ago, laurynhamre said:

Site URL: jabberproductions.com

Page Working On: https://www.jabberproductions.com/podcast-editing

Hi, 

Wondering if I can have help with this. I made an animation on Canva for the "header" of each page of my website. I made it to fit on web view but wondering how I add a second video to fit for the mobile view. When going to add another video like the other threads say, it says that I can only replace the video. Sorry if this has been answered before 

Second video here, means, you need to add one more section under current section, then add a video here, then we can check and give code to show 1 section on desktop, show a section on mobile

Hi! ok great I added the video below. so now it should be good! 

11 hours ago, laurynhamre said:

Hi! ok great I added the video below. so now it should be good! 

So

• Desktop: show top section, hide second section
• Mobile: show second section, hide top section

Is that right?

On 4/27/2024 at 11:08 PM, laurynhamre said:

Site URL: jabberproductions.com

Page Working On: https://www.jabberproductions.com/podcast-editing

Hi, 

Wondering if I can have help with this. I made an animation on Canva for the "header" of each page of my website. I made it to fit on web view but wondering how I add a second video to fit for the mobile view. When going to add another video like the other threads say, it says that I can only replace the video. Sorry if this has been answered before 

14 hours ago, Lewissnell said:

 

You can add one more section under current >> then add mobile video to this section >> then we can give code to make this section appears on mobile only.