Site URL: https://www.jonstacey.me
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)
Normal Video above - see where the video height is relative to the header
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!