Jump to content

Mobile view video severe crop in

Recommended Posts

Site URL: https://www.harriscomposites.com

Good evening! We had some professional videos done of our company and we are starting to fill them into the site…. If you go to the home page and the about me page both videos are cropping in extremely hard to the point you can’t tell what’s going on in the about me. 
 

 

obviously they look great on desktop it’s the mobile that’s the issue. Any solutions?

 

thank you!

Link to comment
On 9/18/2021 at 9:45 AM, Jaredhci said:

Site URL: https://www.harriscomposites.com

Good evening! We had some professional videos done of our company and we are starting to fill them into the site…. If you go to the home page and the about me page both videos are cropping in extremely hard to the point you can’t tell what’s going on in the about me. 
 

 

obviously they look great on desktop it’s the mobile that’s the issue. Any solutions?

 

thank you!

Try adding to Design > Custom CSS

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

[data-section-id="60d083df2a1ec1090d433780"] video {
    object-fit: contain !important;
}
}

This code for 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
1 hour ago, tuanphan said:

Try adding to Design > Custom CSS

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

[data-section-id="60d083df2a1ec1090d433780"] video {
    object-fit: contain !important;
}
}

This code for homepage

Thank you so much!

 

this works great for the home page. Would you have a fix for the about me section and getting it to be better?

 

Thank you for the help

Link to comment
  • am2288 changed the title to Video background - mobile crop
23 hours ago, Jaredhci said:

Thank you so much!

 

this works great for the home page. Would you have a fix for the about me section and getting it to be better?

 

Thank you for the help

Use this new code

@media screen and (max-width:767px) {
[data-section-id="60d083df2a1ec1090d433780"], [data-section-id="613fa9bdd4318639512a8d04"] {
    min-height: unset !important;
    height: 35vh !important;
}

[data-section-id="60d083df2a1ec1090d433780"] video, [data-section-id="613fa9bdd4318639512a8d04"] video {
    object-fit: contain !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 9/21/2021 at 2:55 AM, am2288 said:

Site URL: https://tarpon-clementine-aswg.squarespace.com/

Hi there!

Video background is great on desktop but the mobile crop is terrible. Anyone with any code or tips that could help? 

https://tarpon-clementine-aswg.squarespace.com/

Password: 123

Any help would be greatly appreciated! Thank you 🙂

Hi,

123 is incorrect 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
On 9/21/2021 at 8:02 AM, MorganePinet said:

Hello, 

I would like to apply this code to my main home page video.

I have tried these codes but unfortunately it's not working for my website. Could you please tell me what can I do ?

https://www.mademoisellemorgane.com.au/

 

Thank you !! 

Try this new code

@media screen and (max-width:767px) {
body.homepage article section:first-child {
    min-height: unset !important;
    height: 35vh !important;
    margin-top: 20vh;
}

body.homepage article section:first-child video {
    object-fit: contain !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 months later...

Site URL: https://visuatest.squarespace.com/

Hi, I'm having issues with the header hiding 1/3 of the background video on my home page. I try using padding and margin, but the distance of the padding or the margin is noticeable when I move to the mobile version. 

I would like the header to not crop the video, but also I want the video to be resized depending on the display size; because at the moment, the video will be cropped depending if is in the pc or mobile version.    

Link to comment

Yes, but the problem is the video will not resize to a different display show. For example, when you view from mobile the video will be cut 3/4 of the view size. Or when you minimize the web page the video will be cropped.

Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the full view video with that specific section height?

 

Thank You!

Link to comment

Yes, but the problem is the video will not resize to different display show for example; when you view from mobile the video will be cut 3/4 of the view size. Or when you

 

Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the view of the video full with that specific section height?

Link to comment
On 1/11/2022 at 4:44 AM, VisuaGroup said:

Yes, but the problem is the video will not resize to different display show for example; when you view from mobile the video will be cut 3/4 of the view size. Or when you

 

Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the view of the video full with that specific section height?

To resize video on mobile, add to Design > Custom CSS

/* resize video mobile */
@media screen and (max-width:767px) {
[data-section-id="61d63c0cb059294ab1718460"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="61d63c0cb059294ab1718460"] {
    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
  • 4 months later...

@tuanphan I am having a similar issue to others here getting video banners to work on mobile without severe crop

I have tried using the custom css codes you shared above but I don't seem to be having much luck

I will be having a video banner on each page of my site and I wonder if you could recommend coding I can add that enables the videos to display properly on mobile?

My page is www.skim-epk.com

password = SKIM

Thanks in advance

Link to comment
On 6/11/2022 at 9:32 PM, CraftyClown said:

@tuanphan I am having a similar issue to others here getting video banners to work on mobile without severe crop

I have tried using the custom css codes you shared above but I don't seem to be having much luck

I will be having a video banner on each page of my site and I wonder if you could recommend coding I can add that enables the videos to display properly on mobile?

My page is www.skim-epk.com

password = SKIM

Thanks in advance

Hi,

You mean Skim Video behind the text?

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

Hi,

You mean Skim Video behind the text?

Hi Tuanphan,

 

as you probably noticed I was able to fix most of the issues and now have the video banner (Skim video behind the text) working on desktop and mobile.
The only bit I'm now struggling with is having it full bleed as the top gets covered by the site header. Is there a way to have it full bleed and not crop off the top? Do I need to add some padding as CSS code?

 

Thanks 

Link to comment
13 hours ago, CraftyClown said:

Hi Tuanphan,

 

as you probably noticed I was able to fix most of the issues and now have the video banner (Skim video behind the text) working on desktop and mobile.
The only bit I'm now struggling with is having it full bleed as the top gets covered by the site header. Is there a way to have it full bleed and not crop off the top? Do I need to add some padding as CSS code?

 

Thanks 

Add to Design > Custom CSS

/* Skim video */
[data-section-id="626e6f20a6ff595d5a7e9c23"] {
    margin-top: 100px;
}
@media screen and (max-width:767px) {
[data-section-id="626e6f20a6ff595d5a7e9c23"] {
    margin-top: 50px;
}
}

 

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.