Jump to content

Embedding Vertical Video Resolution

Recommended Posts


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!?!

Screen Shot 2019-10-08 at 11.20.23 AM.png

Link to comment
  • 3 months later...

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>


Link to comment
  • 3 months later...

@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. 


Link to comment
  • 5 months later...

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!

Link to comment
  • 5 months later...

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.

image.thumb.png.3a9ae630f2441e3925ae69770d287ee8.pngThe 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. 


If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 1 year later...

@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?


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.