Jump to content

Vertical video not responsive

By JillThurman, in Images & Videos

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 4
  • Views 84
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

JillThurman
JillThurman

Site URL: https://eagle-dolphin-9kz9.squarespace.com/config/pages/website-tools/custom-css Does anyone know what I am doing wrong? I want to add a vertical video to my website, on desktop it works,

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
8 minutes ago, JillThurman said:

Site URL: https://eagle-dolphin-9kz9.squarespace.com/config/pages/website-tools/custom-css

Does anyone know what I am doing wrong? I want to add a vertical video to my website, on desktop it works, with the custom css code below. But it does not resize for mobile. How do I get it to look good on mobile as well?  

.sqs-native-video .native-video-player {
    padding-bottom: 120% !important;
}

Your site at https://eagle-dolphin-9kz9.squarespace.com/ is password protected, we can not see it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted
On 11/26/2024 at 4:03 PM, JillThurman said:

Does this image help you assess the problem?

Scherm­afbeelding 2024-11-26 om 10.02.10.png

To adjust it on mobile, you can use this code to bottom of CSS box (make sure no } symbol after the code), adjust 120% with another value 

@media screen and (max-width:767px) {
.sqs-native-video .native-video-player {
    padding-bottom: 150% !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!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources