Change aspect ratio of video block in 7.1 desktop and mobile

Site URL: https://hawk-lavender-ne5l.squarespace.com/portfolio

Issue:

I'm working on the portfolio page where I have multiple sections of image blocks with the aspect ratio of their standard size of 2:3 (vertical). While this works for images and gifs, my client would like me to switch out the gif files for video files. I made my videos the same size as my images and uploaded a video block but squarespace does not support aspect ratios for video other than I believe 16:9. I found some custom css to plug in but it does not do the trick for the design of my page. This is the custom css I found —

.video-block .video-player{ padding-bottom:120% }

(I adjusted the percentage to get as close as I could to a 2:3 ratio which turned out to be 94%)

While this worked...somewhat....it also looks like it broke the code for my image blocks. Altering them to have a longer container so it wouldn't line up with the grid squares in comparison to the video block. Leaving the video block slightly higher/lower. Then it would not scale when switching over to mobile. 

Question:

Is there custom coding to help my portfolio page display videos in the same aspect ratio as my images and have them fit in perfectly on desktop and mobile?

https://hawk-lavender-ne5l.squarespace.com/portfolio

Password: cainsbitch

(sorry about the password, my dogs name is Cain lol) 

Here are some screenshots of how the videos display on desktop and mobile when I try the code above

5 hours ago, chels_acosta said:

Site URL: https://hawk-lavender-ne5l.squarespace.com/portfolio

Issue:

I'm working on the portfolio page where I have multiple sections of image blocks with the aspect ratio of their standard size of 2:3 (vertical). While this works for images and gifs, my client would like me to switch out the gif files for video files. I made my videos the same size as my images and uploaded a video block but squarespace does not support aspect ratios for video other than I believe 16:9. I found some custom css to plug in but it does not do the trick for the design of my page. This is the custom css I found —

.video-block .video-player{ padding-bottom:120% }

(I adjusted the percentage to get as close as I could to a 2:3 ratio which turned out to be 94%)

While this worked...somewhat....it also looks like it broke the code for my image blocks. Altering them to have a longer container so it wouldn't line up with the grid squares in comparison to the video block. Leaving the video block slightly higher/lower. Then it would not scale when switching over to mobile. 

 

Question:

Is there custom coding to help my portfolio page display videos in the same aspect ratio as my images and have them fit in perfectly on desktop and mobile?

https://hawk-lavender-ne5l.squarespace.com/portfolio

Password: cainsbitch

(sorry about the password, my dogs name is Cain lol) 

 

Here are some screenshots of how the videos display on desktop and mobile when I try the code above

You are mentioning the issue about the video spacing like so right?

Yep 🙂