Jump to content

Embedding Vertical Video Resolution

Recommended Posts

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

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

Link to comment

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. 

image.thumb.png.84f596495281ef5e0aafca4abb5683c5.png

 

image.png.e7051e79516811a6084378af25d0c610.png

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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. 

mcgouran.john@gmail.com

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. 

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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?

image.thumb.png.c6d6f1912e755f95b6643ffea10fa602.png

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.