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

Scaling background videos for mobile


Recommended Posts

On 5/25/2022 at 6:30 PM, IwanJ said:

Hi @tuanphan! Could you please help with my homepage section background videos to scale for mobile??

I have two videos - each is the background of a different section.

I just need both videos on mobile to fit in the background of each section.

https://deep-learning-cafe.squarespace.com/

password: password123

ūüôŹ

Capture6.PNG

Capture7.PNG

Did you solve this?

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

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

Hi there,

I've been following this thread as having the same issue.  I'd like to stop my homepage video resizing on mobile viewing.  I've successfully managed this through copying and pasting the code below.

I do, however, now have a background black box showing as per the attached screenshot.  Any thoughts as to how I might work around this would be much appreciated.

https://rhombus-dachshund-pwjt.squarespace.com

password: vanity

Many thanks.

Katie

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
        inset: unset !important;
        top: 0 !important;
        height: 200px !important;
    }
body.homepage .Parallax-item:first-child figure.Index-page-image.loaded {
    transform: unset !important;
    bottom: 0 !important;
    height: 200px !important;
}
section#new-page-2 {
    height: 250px !important;
}}

Screen Shot 2022-06-16 at 15.01.00.png

Link to comment
39 minutes ago, KatieEdieChalk said:

Hi there,

I've been following this thread as having the same issue.  I'd like to stop my homepage video resizing on mobile viewing.  I've successfully managed this through copying and pasting the code below.

I do, however, now have a background black box showing as per the attached screenshot.  Any thoughts as to how I might work around this would be much appreciated.

https://rhombus-dachshund-pwjt.squarespace.com

password: vanity

Many thanks.

Katie

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
        inset: unset !important;
        top: 0 !important;
        height: 200px !important;
    }
body.homepage .Parallax-item:first-child figure.Index-page-image.loaded {
    transform: unset !important;
    bottom: 0 !important;
    height: 200px !important;
}
section#new-page-2 {
    height: 250px !important;
}}

Screen Shot 2022-06-16 at 15.01.00.png

edit this class name

Quote

section#new-page-2

to this

section#vanity-brothers-showreel

 

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

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 6/16/2022 at 11:10 PM, KatieEdieChalk said:

Thank you very much, that's definitely helped.  Is there anyway to reduce the black border (to the sides and bottom) completely?  

See screenshot.

Screen Shot 2022-06-16 at 17.08.34.png

You should check original video, I see it has padding on left/right side

On 6/17/2022 at 1:57 AM, DMcMurry said:

I am having the same issue: https://www.youraustinliving.com

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="627d28849738ff589dee3772"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="627d28849738ff589dee3772"] {
    min-height: unset !important;
}
}

 

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

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

May I clarify the point "you should check original video, I see it has padding on left/right side"?  Should I ask the client to prepare the video to different dimensions?  How can they reduce the padding, assuming it's relating to the original video preparation rather than the template styling.

Many thanks

Link to comment
  • 1 month later...

Site URL: http://www.jakemitchellmiller.com

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile.

Please advise.

Link to comment
17 hours ago, 5ake5 said:

Site URL: http://www.jakemitchellmiller.com

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile.

Please advise.

Add to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#welcome {
    min-height: unset;
    height: 200px;
}
body.homepage .Parallax-item:first-child figure {
    bottom: 0 !important;
}
}

 

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

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