Jump to content

Another Video Padding Question....

Go to solution Solved by Ziggy,

Recommended Posts

Hello all,

I know this question has been asked many times before, and I've tried many of the coding solutions in the replies.

Whatever video I upload, padding is added to the file. The padding doesn't appear when I play it locally, or when it's posted online (Instagram).  The blue box in the attached picture designates the original file size/ratio, and the red lines indicate what is added when the file is added to my page, and what I want removed.

Thanks again for the help.

Bri.

Padded Video Example.png

Edited by MikeAndBri
Fomatting issues
Link to comment

You need to use CSS to change the padding from the default 16:9 ratio to 9:16.

Can you share your website URL and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, MikeAndBri said:

Would I be able to share the url/page in order to diagnose the problem?

Yes, like this:

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)

Thank you Ziggy,

The url/page is as follows:  brianna.social  and the page is www.brianna.social/video-test

 

I'll create a link so that the mentioned video/s would open on a separate page.

 

- Bri

Edited by MikeAndBri
Issue Resolved
Link to comment
  • Solution

Try this to get you started:

#block-yui_3_17_2_1_1722876985398_2426, #block-yui_3_17_2_1_1722876985398_1663 {
  .sqs-native-video .native-video-player {
    padding-top: 177.778%;
  }
}

It applies to both the blocks on that page using their block IDs, you can add more by separating each additional block ID with a comma and a space.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, MikeAndBri said:

It's working just fine!

Thanks again for the help.

Happy to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.