Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

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

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

Screen Shot 2021-04-19 at 11.40.25 AM.png

Link to comment

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. 

 

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

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