Embedding Vertical Video Resolution

Hi, 

Hope someone can help! I'm trying to embed a vertical video (not 16x9) on my site but the code I'm using does not work. 

Currently it looks like the below screenshot. I'm using the embed feature with this code:  https://www.youtube.com/watch?v=TWmsvIQYqSI&feature=youtu.bew=270&h=480 I would love for the actually embedded video to be 270 by 480. What am I doing wrong? how can I get those black bars outta there!?!

I did something like this recently with Vimeo videos. See https://www.inthewhiteroom.com

The trick is to insert the video block but use the embed feature rather than pasting the url. 

This didn't seem to work for me. Even using the embed code it still displays as a horizontal video with black bars on the sides. The video displays vertically without any black bars on YouTube just fine and the embed code specifies the correct width and height but Squarespace seems to just ignore it.

<iframe width="560" height="315" src="https://www.youtube.com/embed/P6tF3PttVLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Did anyone figure this out? I'm having the same issue! 

Many thanks, 

Charles 

@CpeoplesIIIThe answer is:  You cannot crop within a video image as the video was originally encoded at full-frame and requires a software decoder embedded within the video for playback.  The embed code within SQS works fine for youtube videos. If you own a video that you want to crop, you have to  import your full-fame video into video editing software, crop the video, re-size the video (zoom in on itself, going to look pixalated or have black borders, or be a non-standardized video file size) with an effect. When you have rendered your new video you then re-compress the video for export and then import to your platform of choice (must be a standard video size).  There is a possible CSS solution; if you place the video as a background and use a foreground overlay as a frame, however as the video playback controller is embedded with the video your going to require some serious coding capability and expect your site to be black listed by Google very quickly. 

Hello Cassidy, I know it's a year later, but I was able to make it work on my website here are the steps to embed a video from youtube and decide the aspect ratio of the iframe!
With this method you have 100% control on the "shape" of the video, so you can make 1:1 / 4:3 / 9:16 and all more mobile-friendly formats work.
 

1. Go onto the video of your choice on youtube and click the share icon,.
2. Select the first option named "EMBED" and copy that code.
3. In square space open the video section.
4. Select the </> icon.
5. Paste the youtube code do not click "SET" yet
6. Read the code, and find the following segment : iframe width="1600" height="900"
7. Replace those numbers by the aspect ratio of your choice.
8. TIP: let's say you want a 4:3 ratio type the number 300 for width and 400 for height. Use squarespace to actually resize the video to the right size AFTER selecting the ratio.
9. SET

Bonus: if you use a custom thumbnail it will adapt to the shape of your iframe.

Let me know how it goes!

@influencif

Thank you for providing this helpful tutorial! Is there any way to set the video within this code block so the video plays automatically and loops. Mine gets set to the default youtube thumbnail.

https://forum.squarespace.com/profile/247970-influencif/

I implemented autoplay videos with non standard aspect ratios on this site - https://www.inthewhiteroom.com/#home-about-us

You use a video block but rather than inserting the video URL you instead use the Embed Data option to insert IFRAME code.

The IFRAME code includes the height and width of the video. It can be larger than the slot it fits within because the surrounding video block sets its actual size. 

 

@colin.irwinThank you for providing this info! Do you mind sharing what your IFRAME code is?

I think you can see it on the screenshot. That is a version for Vimeo embeds. 

@colin.irwin I came across this thread today and it looks like Squarespace has since removed that embed icon within the video block. I used the embed block instead to input the embed code from Canva directly and it worked, but it's shows 3 dots and an expand button on the bottom right. It also puts small lines in the corners. What should I use instead to build this mp4 with the video inside the phone?