Jump to content

Displaying Squared Videos

Recommended Posts

Site URL: https://www.jonstacey.me

Hey guys

Bit of a weird one to explain this...so bare with me....

As well as normal 16:9 videos, I've got a few square videos (1:1) that I want to upload too. These are hosted on YouTube, which adds black border to the side of the video to make it fit 16:9. When I add the square video to my site, even if I mess about with the iframe size and height to make them equal (squared), it just zooms in the video, it doesn't stop from the video player being 16:9.

One kind of fix I found was to put a space either side, which does reduce the size of it. What I'm looking to do is having the video the same size in relation to all my other 16:9 videos. If you check out one of those, you'll see the height of them, now the square video should be the same height but just not as wide. My issues is that because I only drag the spacers to certain fixed point, it either results in the square video being smaller relative to the other 16:9 videos or too big (Can't fit all in frame)

spacer.pngspacer.pngspacer.pngspacer.pngspacer.pngspacer.pngspacer.png262627480_Screenshot2020-08-25at09_41_01.thumb.jpg.965323e4b6a437c2ac6c9aaa2bd22fef.jpg

 

Normal Video above - see where the video height is relative to the header

 

741193668_Screenshot2020-08-25at09_45_37.thumb.jpg.70cc2ea6345af567b09193672e343355.jpg

Square Video - See that it's much smaller. The source video height is exactly the same as it is in 16:9 (1080), it should just be the width that is reduced. (from 1920 in 16:9 to 1080 in 1:1)

 

Anyone know a way of fixing this? I've googled about but can't seem to find a decent solution for uploaded squared video.

 

Many thanks guys!

Link to comment
  • Replies 1
  • Views 321
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.