Jump to content

Changing aspect ratio of video player - Squarespace hosted videos

Go to solution Solved by joseph81,

Recommended Posts

Does anyone know how to change the aspect ratio for video player?

 

I'm using the uploaded-to-Squarespace video option in fluid engine and wanted to get a fun little gallery of 4-5 talking head video shorts, using a 4:5 aspect ratio.

I can upload videos in that aspect, and when actually playing it (desktop) looks as I want it to, but the video controllers are in a 16:9 shape, and so is the cropped thumbnail before you hit play. And on mobile it keeps the 16:9 ratio so the video is too small, when a 4:5 should look good on mobile with the videos stacked. If I make the video block the right shape, it just shrinks the video inside it right down with a gap top and bottom.

It feels like there should be a 'design' tab in the video block to control how it looks. So frustrating!

Site https://digital-prospectus.squarespace.com/ 

Password: Dani123 - forgive the random appearance, it's in 'playing with ideas' stage at present.

 

Screenshots: 1 and 2 are the thumbnail and video controls showing how it forces a wider aspect ratio. The third one is what it looks like whilst playing, this is how I want it to look. 4 is playing in mobile - it shrinks down because it is using the too wide video block.

Screenshot 2022-11-11 at 15.28.58.png

Screenshot 2022-11-11 at 15.28.22.png

Screenshot 2022-11-11 at 15.28.13.png

Screenshot 2022-11-11 at 15.43.48.png

Link to comment

I just wrote yesterday an article about this actually: 

/*make video-blocks 4:3*/
.video-block {
   .embed-block-wrapper,
   .intrinsic-inner {
    padding-bottom: 75% !important
  }
}

https://www.ui-workarounds.com/control-the-aspect-ratio-of-your-videos-in-squarespace/

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

The 4:5 ratio would look like this:

.video-block {
   .embed-block-wrapper,
   .intrinsic-inner {
    padding-bottom: 125% !important
  }
}

My solution works with video blocks, I'm not sure what you are using since the  password you provided does not work to enter your website.

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
  • 1 month later...
  • 6 months later...
On 7/2/2023 at 7:08 AM, anthony-onlineiseasy said:

Trying to get a square video In 7.1 Fluid Engine...

padding-bottom: 100% !important

the square 1:1 (1080p x 1080p) video is uploaded to SQSP (not hosted externally) and this code adds white space above and the gradient control bar to the bottom. Not at all square. Any thoughts?

squarevideo.jpg

Can you share link to this page? We can check easier

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
22 hours ago, anthony-onlineiseasy said:

Any ideas on rounded corners for videos? ... note: the site is live now https://agaymanbook.com/

Use this CSS

/* Round video */
.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !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
  • 1 month later...
21 hours ago, Martian said:

I'm hoping to target a specific video and not all videos globally 😕 also, where exactly do I put the code (I'm assuming the custom css section?)

Add video block id before the code

#video-block-id {
/* Round video */
.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}
}

Use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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

trying to get this code:

section[data-section-id="62288e21b7d01f1d41761926"] .video-block {
.video-player {
padding-bottom: 56.25% !important
}
}


to work with this ID:
#block-yui_3_17_2_1_1696090350035_1891

For this website using the Squarespace native video:
www.martiandesign.com

I cant seem to get it to work. Any help is greatly appreciated.

 

I'm currently using this code but I'm having issues:


/* The following resizes the Andromeda Cloud video */
#block-yui_3_17_2_1_1696090350035_1891 {
padding: 0px!important;
.embed-block-wrapper  {
  padding-bottom:0!important;
}
.native-video-player {
    padding-top: 70%;
}
video {
   object-fit: cover;
}

 

Edited by Martian
Link to comment
On 10/1/2023 at 9:39 PM, Martian said:

trying to get this code:

section[data-section-id="62288e21b7d01f1d41761926"] .video-block {
.video-player {
padding-bottom: 56.25% !important
}
}


to work with this ID:
#block-yui_3_17_2_1_1696090350035_1891

For this website using the Squarespace native video:
www.martiandesign.com

I cant seem to get it to work. Any help is greatly appreciated.

 

I'm currently using this code but I'm having issues:


/* The following resizes the Andromeda Cloud video */
#block-yui_3_17_2_1_1696090350035_1891 {
padding: 0px!important;
.embed-block-wrapper  {
  padding-bottom:0!important;
}
.native-video-player {
    padding-top: 70%;
}
video {
   object-fit: cover;
}

 

Can you share link to a page where you use video? We can check easier

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.