Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Scaling background videos for mobile


Recommended Posts

  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 9/19/2020 at 3:11 PM, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }
</style>

 

Hi Tuanpan,

I have the same issue with 2 videos on my homepage, how do I apply this code to work on my site. 

My site is:

https://beagle-tangerine-ex9m.squarespace.com

Site password: digitalnative

 

Or is there a way to replace the background video with a different video scaled for mobile?

 

 

 

Link to comment
  • 5 months later...
Posted (edited)

I am having the same issue, and when I used the code supplied above it looks good in the squarespace mobile preview on my computer but when I test it on a phone, it just goes to my mobile fallback image.  I test it on a tablet and it looks fine in landscape, but when the tablet is portrait, it cuts off still.  I'm new to webdesign and css so I'm not sure I'm following the different parts of the code, but I appreciate all your help.

 

www.focused-architects.com

 

Thanks for all your help!

Edited by Lilmac024
Link to comment
On 5/18/2021 at 11:11 AM, Lilmac024 said:

I am having the same issue, and when I used the code supplied above it looks good in the squarespace mobile preview on my computer but when I test it on a phone, it just goes to my mobile fallback image.  I test it on a tablet and it looks fine in landscape, but when the tablet is portrait, it cuts off still.  I'm new to webdesign and css so I'm not sure I'm following the different parts of the code, but I appreciate all your help.

 

www.focused-architects.com

 

Thanks for all your help!

You mean this video?

image.thumb.png.f65a7cc75dde7d3682c8ea6fdce8b62f.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/21/2021 at 9:17 AM, Lilmac024 said:

yes...on mobile devices, the video doesn't adjust it's size to be legible...is there a way to do that?

Hi. It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thank you for the help...I'm still having the issue on phones and when a tablet is held vertical...  See below for different views on different devices.

 

Desktop:Desktop.thumb.JPG.3c2de6f97b4f350488273d3915675309.JPG

 

Phone (Vertical/Portrait): 

Phone-Portrait.thumb.PNG.51dff6ce7a9724e4fc30922efdd298e1.PNG

 

Phone (Horizontal/Landscape😞

Phone-Landscape.thumb.PNG.08970fbecbfe20797477762059f38ee4.PNG

 

Ipad (Vertical/Portrait):

Ipad-Portrait.thumb.png.9efce13752f3478ed328ded60af44482.png

 

Ipad (Horizontal/Landscape):

IPad-Landscape.thumb.png.1bdd54cb16d668a091ca99319ed6aaa5.png

Link to comment

Try adding to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 10/3/2021 at 12:12 AM, rachaelthedinosaur said:

I am having similar complications. Any assistance would be appreciated! www.mercitalent.com  - the mobile view is very low quality and cropped inward. Thanks in advance!

Add to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
[data-section-id="615270f2733491282201cfd2"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="615270f2733491282201cfd2"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 20vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...