Jump to content

Video cropping on horizontal mobile view

Recommended Posts

Hello! I just launched a site for a client, and post-launch, we realized the video has a massive crop on both sides when viewing the site on our mobile device and turning the phone horizontally. I'm hoping someone can assist. 

Please see the images attached. I've labeled them desktop view, vertical mobile view, and horizontal mobile view (the issue). 
Is there a solution to this? 

Desktop.View.png

Vertical.Mobile.View.PNG

Horizontal.Mobile.View.PNG

Link to comment
  • Replies 3
  • Views 529
  • Created
  • Last Reply

Top Posters In This Topic

You have a code in Page Header or Code Injection caused this. Use this (Design > Custom CSS) to override it

@media screen and (max-width:767px) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 35vh !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! Thank you so much for the response. I deleted the page header code injection and plugged in your code...unfortunately, this didn't work for when you turn the phone horizontally (see screenshot). 

The rest of the site rotates and adjusts fine (see 2nd attachment), but the video in the header section crops inward. 

I've designed other sites, where I've used a video as the background to my header section and I've had no issues. Any ideas? Thoughts on how to fix this? Is it the video itself? 

I appreciate your help!

IMG_3352.PNG

IMG_3353.PNG

Link to comment

With horizontal mode, try this new code

@media screen and (max-width:767px) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 35vh !important;
}
}
@media screen and (max-width:767px) and (orientation:landscape) {
#page [data-section-id="6363ef407fb58c2cc9d30ebe"]:first-child {
    min-height: unset !important;
    height: 45vh !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

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.