Jump to content

Scaling background videos for mobile

Recommended Posts

Hi @tuanphan, I have been attempting to put the below code into PAGE SETTINGS > ADVANCED for my background video to be the correct width on my home page on mobile view. It displays correctly BUT the code shows at the top of the site when loading. I know that in order to remove the code at the top of the site I need to add in  <style> at the beginning and </style> at the end, but when I do this it pushes the video right up to the top behind the menu so that it is only half visible. Note that I have also tried putting the code in DESIGN > CUSTOM CSS, but this doesn't change anything at all. Could you please help? My site is live at https://www.zoopnz.com Thank you in advance.

 

@media screen and (max-width:1024px) {

.sqs-video-background .custom-fallback-image {

    width: 100% !important;

    height: auto !important;

    left: 0 !important;

    min-width: unset !important;

    min-height: unset !important;

}

[data-section-id="609a00db171f38714802d29e"] {

    min-height: unset !important;

}

}

Link to comment
On 1/25/2023 at 6:17 AM, ConnorCF said:

Hi @tuanphan, I have been attempting to put the below code into PAGE SETTINGS > ADVANCED for my background video to be the correct width on my home page on mobile view. It displays correctly BUT the code shows at the top of the site when loading. I know that in order to remove the code at the top of the site I need to add in  <style> at the beginning and </style> at the end, but when I do this it pushes the video right up to the top behind the menu so that it is only half visible. Note that I have also tried putting the code in DESIGN > CUSTOM CSS, but this doesn't change anything at all. Could you please help? My site is live at https://www.zoopnz.com Thank you in advance.

 

@media screen and (max-width:1024px) {

.sqs-video-background .custom-fallback-image {

    width: 100% !important;

    height: auto !important;

    left: 0 !important;

    min-width: unset !important;

    min-height: unset !important;

}

[data-section-id="609a00db171f38714802d29e"] {

    min-height: unset !important;

}

}

Hi,

Site shows no code to me. Did you solved it?

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 2/2/2023 at 4:27 AM, focuscreative said:

Hi, I've been following this thread and have tried a bunch of drifferent code, but Im trying to do the same for my site. 

futurefocus.co is the web address and it is the video on the homepage header. I want it so re-size so it doesn't cut off on mobile view. Any help greatly appreciated!!

Add to Design > Custom CSS

/* resize mobile video */
@media screen and (max-width:991px) {
[data-section-id="638d4b25bfd93735dab428be"] {
    min-height: unset !important;
    height: 30vh !important;
}
}

 

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
  • 3 weeks later...

I too have a background video for my desktop, but it doesn't work for my mobile background so I made a separate one.

https://laserlight.house/

As per you direction on a previous post to this feed, I have duplicated the section and added the mobile version in there.

I put the following css in custom css in settings, but now it shows the desktop video on the desktop, but both videos on mobile.

@media screen and (max-width:1024px) {
  [section-data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="63fcc92ea4186c086c767f8b"] {
    display: none !important;
  }
}

What code is wrong? 

Desktop Showing 1 Video:

image.thumb.png.281da314fcc047990a404d32e69322c9.png

Mobile Showing 2 Videos:

image.thumb.png.97dba283050aa14c99cf1766393ea9fe.png

Edited by LaserLighthouse
Removed tag
Link to comment
On 2/28/2023 at 1:01 AM, LaserLighthouse said:

I too have a background video for my desktop, but it doesn't work for my mobile background so I made a separate one.

https://laserlight.house/

As per you direction on a previous post to this feed, I have duplicated the section and added the mobile version in there.

I put the following css in custom css in settings, but now it shows the desktop video on the desktop, but both videos on mobile.

@media screen and (max-width:1024px) {
  [section-data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="63fcc92ea4186c086c767f8b"] {
    display: none !important;
  }
}

What code is wrong? 

Desktop Showing 1 Video:

image.thumb.png.281da314fcc047990a404d32e69322c9.png

Mobile Showing 2 Videos:

image.thumb.png.97dba283050aa14c99cf1766393ea9fe.png

First code is invalid. The code should be

@media screen and (max-width: 767px) {
    [data-section-id="63f92211ba57b758b1a91dd2"] {
        display:none !important;
    }
}
@media screen and (min-width: 768px) {
    [data-section-id="63fcc92ea4186c086c767f8b"] {
        display:none !important;
    }
}

 

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/10/2023 at 8:48 PM, PoppyShotts said:

Hi, do you know how I can do this in 7.0 version? i can't locate data section ID...

If you use Index Page, you can target Section ID. 

If you use 2 Video Blocks, you can target Block ID

Or you can share link to page, we can check & give the code

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/2023 at 12:32 AM, Trold said:

As many before me, i have had no luck in typing in all the codes listed here. What am I doing wrong here??

Site is: www.troldband.com
 

 

Skærmbillede (1).png

Skærmbillede (2).png

The site is private. Can you setup an access password?

 

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
  • 2 weeks later...
On 3/26/2023 at 4:44 PM, leighgreenwood said:

Hi there, I am having similar issues here. I have tried adding the various codes and changing the data ID to what I think it is for my website.

I have a video running in the background header on an Index page on the homepage, and other videos in the same place on other pages. They display well on desktop but not on mobile. The website is https://evergreenpr.co.uk/

Thanks for any help.

Add this to Design > Custom CSS

/* Mobile - Homepage - Resize video */
@media screen and (max-width:640px) {
section#introduction {
    min-height: unset !important;
    height: 40vh !important;
}
body.homepage .Parallax-item:first-child iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.homepage .Parallax-item:first-child figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 40vh !important;
}
}

 

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

Hi, thanks so much for this suggestion. It is so close to delivering what we need but there were a couple of issues.

If you see the below images it shows what it looks like when you first log in and then once the video is playing.

 

It has successfully altered the size of the video, which is what we wanted. However, it shows the image of the channel owner, the YouTube icon and has a black border around it. Is there anything that can be done on those points please? Thanks for your help!

 

image_123986672 (4).JPG

image_123986672 (3).JPG

Link to comment
On 3/29/2023 at 6:57 PM, leighgreenwood said:

Hi, thanks so much for this suggestion. It is so close to delivering what we need but there were a couple of issues.

If you see the below images it shows what it looks like when you first log in and then once the video is playing.

 

It has successfully altered the size of the video, which is what we wanted. However, it shows the image of the channel owner, the YouTube icon and has a black border around it. Is there anything that can be done on those points please? Thanks for your help!

 

image_123986672 (4).JPG

image_123986672 (3).JPG

If you want to remove Youtube icon, Channel image, you can consider uploading video, instead of using Youtube link

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

Hey having the same issue as everyone else lol

My video background on desktop is great but on mobile its super cropped.  What's the best solution for this?  I really love the video background and want to keep using it for both versions.  i just need it to zoom out enough to keep the ferris wheel on screen

www.infinitedronescapes.co.uk pass drone

Link to comment
On 4/4/2023 at 12:38 AM, InfiniteDronescapes said:

Hey having the same issue as everyone else lol

My video background on desktop is great but on mobile its super cropped.  What's the best solution for this?  I really love the video background and want to keep using it for both versions.  i just need it to zoom out enough to keep the ferris wheel on screen

www.infinitedronescapes.co.uk pass drone

Add to Design > Custom CSS

/* Mobile - Home top - Resize video */
@media screen and (max-width:767px) {
[data-section-id="6363a5e22b4af12425470dd3"] {
    min-height: unset !important;
    height: 35vh;
}
}

 

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
  • 1 month later...
  • 2 weeks later...
On 6/14/2023 at 12:23 AM, 27Moon said:

Hi @tuanphan, could you also help me? I'd like to have the autoplaying video in the header full width and height in the mobile version, but right now it displays two black banners on top and at the bottom (I assume because of the file). Its there a custom CSS for it? The website is https://www.casasamasintra.com . Thanks a lot!

Don't remove any code in your current code.

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="64496145f57a345d30632979"] {
    min-height: unset !important;
    height: 30vh;
}
}

 

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
6 hours ago, tuanphan said:

Don't remove any code in your current code.

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="64496145f57a345d30632979"] {
    min-height: unset !important;
    height: 30vh;
}
}

 

thanks for your reply. I've added the code but unfortunately it doesn't look correct, now the header is almost completely gone and actually the black banner up and down is not disappearing. Any hints?

Screenshot 2023-06-15 at 15.22.18.png

Edited by 27Moon
forgot to attach file
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.