Video Embedding for Dynamic Features on Website

[Harmony2c]

Hello,

I am interested in embedding videos on my website, but I am noticing each video has a black box around the actual video. I am wondering what the pixel size I would need to remove the black box for the video to show completely. 

Thanks!

[rtfulk · Accepted solution]

@Harmony2c 

That black box around embedded videos on Square Online (or any platform using YouTube/Vimeo embeds) usually happens when:

• The aspect ratio of your video doesn’t match the embed container

• Your video has black bars already baked into the video file

• The embed scaling doesn’t fill the box (especially on mobile or Square’s rigid sections)

To remove or minimize the black box, make sure your video is:

Standard YouTube/Vimeo Aspect Ratio

• 16:9 ratio 

• Recommended size:

 1920×1080 px (Full HD)

 1280×720 px (HD)

 Avoid:

• Portrait/tall videos (e.g., 1080x1920)

• Square videos (1:1) unless your embed container is also square

Test it out

1. Upload a video that is exactly 1920x1080

2. Embed it into your Square Online page

3. View it live (not just in preview), both on desktop and mobile

If the black box disappears or reduces, you’re good.

If Black Boxes Still Appear:

• They might be part of your actual video (check your source file in QuickTime or VLC to confirm).

• Square might be letterboxing the video because of its fixed section layout.

If you’re comfortable using Square’s “Embed Code” section:

<iframe width="100%" height="auto"
src="https://www.youtube.com/embed/YourVideoID"
frameborder="0" allowfullscreen style="aspect-ratio: 16 / 9;"></iframe>

This helps the video scale properly across devices.