How to add a vertical video to Squarespace, Wix or WordPress without black bars or a slow page
How to add a vertical 9:16 video to Squarespace, Wix or WordPress: native upload limits, YouTube and Vimeo embed fixes, muted autoplay loops and page speed.
In this article
You have a 9:16 project film made for Reels and Shorts, and now you want it on your website's project page. Drop it into a video block and one of three things usually happens: it sits in a 16:9 box with thick black bars on both sides, it fills the whole desktop screen from top to bottom, or the page takes seconds longer to load. This guide covers the native upload limits in Squarespace, Wix and WordPress, how to fix the aspect ratio when you embed from YouTube or Vimeo, how to set up a muted autoplay loop, and how to keep the page fast.
Key takeaways
- Uploading the MP4 directly is the simplest route on all three builders, and Squarespace says its video block detects the aspect ratio of uploaded videos, including vertical ones.
- YouTube and Vimeo embeds default to a 16:9 player; a vertical film needs a 9:16 width-and-height pair or a 9:16 container, or it gets black bars.
- Browsers only autoplay video reliably when it is muted, which is why Squarespace requires you to enable Mute before Autoplay.
- Vimeo's
background=1parameter gives a clean muted loop with no controls, but it is a paid-plan feature as of October 2026. - On a desktop layout, cap the width of a vertical video or set it beside text; a full-width 9:16 player is taller than most screens.
- Use a poster image and lazy loading so the video doesn't slow the first view of the page.
How to add a vertical video to Squarespace, Wix or WordPress
Upload the MP4 to the builder's own video block or player, turn on Mute before Autoplay and Loop if you want it to play on its own, add a poster image, and limit its width on desktop. If you host on YouTube or Vimeo instead, paste the embed into a code or HTML block and give the player a 9:16 shape, because the default embed is 16:9 and leaves black bars around a vertical film. Either way, test the page on a phone and on a laptop before you publish.
Native upload limits per builder
Native upload means the file lives on the builder's servers and plays in its own player, which gives the cleanest vertical display and the most playback settings. All figures below are from each builder's help pages as of October 2026.
| Builder | Where you upload | File size and length limits | Formats and resolution | Autoplay, loop, mute |
|---|---|---|---|---|
| Squarespace | Video block or section background | 500 MB per file; 30 minutes per video block; 60 seconds for a section background; 30 minutes of uploaded video per site before you upgrade | .mp4, .m4v, .mov; minimum 360p, displays up to 1080p, accepts 4K uploads | Yes for uploaded files; Mute must be on before Autoplay |
| Wix | Single Video Player, or the Wix Video app | Up to 1 GB in the Single Video Player; up to 15 GB per file in Wix Video | Wix Video lists 480 × 470 to 1920 × 1080 pixels and transcodes uploads to H.264 MP4 | Set in the player's settings panel |
| WordPress.com | Video block (Premium, Business and Commerce plans) or VideoPress block | Files up to 2 GB upload reliably; the VideoPress block takes up to 6 GB | .mp4, .m4v, .mov and others | Autoplay, Loop, Muted, Play inline, poster image |
| WordPress (self-hosted) | Video block | Set by your hosting company; the upload screen shows the current maximum | Whatever the browser can play; H.264 MP4 is the safe choice | Autoplay, Loop, Muted, Play inline, Preload, poster image |
Squarespace
Squarespace's upload guide accepts ".mp4, .m4v, .mov" files up to 500 MB in a video block or section background, recommends 16:9 but says "videos of any aspect ratio will display" (Squarespace Help, as of October 2026). Its video block page goes further: the block will "automatically detect the aspect ratio of uploaded videos and fit the block layout to it, including with vertical videos" (Squarespace Help).
Two catches. Every site gets 30 minutes of uploaded video in total; more requires a plan upgrade or a Digital Products plan. And the custom thumbnail "automatically crops to the aspect ratio of the video block container (16:9)," so pick a poster with the building in the middle. A section background fills the section and crops a vertical film on a wide screen; use a video block instead.
Wix
The Wix Editor offers a Single Video Player that lets you "upload your own video (up to 1GB)," and the Wix Video app takes "up to 15 GB per file" (Wix Help Center, as of October 2026). Wix Video "supports videos that are between 480x470 pixels to 1920x1080 pixels" and transcodes each upload to MPEG-4 with H.264 (Wix Help Center). The help page doesn't say how a 1080 × 1920 file is handled, so upload a test file and check the live site first. Avoid the Video Strip, which Wix says "automatically stretches a video to fit across your screen" and so crops most of a 9:16 frame; a Single Video Player resized to a tall, narrow box fits better.
WordPress.com and self-hosted WordPress
On WordPress.com the Video block is available on the Premium, Business and Commerce plans, with Autoplay, Loop, Muted, Playback Controls, Play Inline and a poster image (WordPress.com Support, as of October 2026). You can "reliably upload files up to 2 GB," and the VideoPress block "supports files up to 6 GB" (WordPress.com Support).
Self-hosted WordPress uses the same block. The WordPress documentation adds a Preload setting with three choices: Auto downloads the entire file "regardless of whether the visitor clicks the Play button," Metadata downloads only basic file information, and None is "the fastest setting" (WordPress.org Documentation, as of October 2026). Your host sets the maximum upload size. Pasting a YouTube URL into the Video block turns it into a YouTube embed block, which brings back the 16:9 problem described next.
Embedding from YouTube or Vimeo: fixing the 16:9 box
The black bars come from the player, not your file. YouTube and Vimeo hand you an embed sized for landscape video, and builders' video blocks wrap a pasted link in a 16:9 container. Squarespace says YouTube or Vimeo links added to a video block lack the playback settings of uploads and points you to an embed block for advanced options (Squarespace Help).
To get a true vertical player:
- Get the embed URL. On YouTube, open the video, choose Share, then Embed (YouTube Help). For a Short, take the ID from the
youtube.com/shorts/address and use it in the standardhttps://www.youtube.com/embed/VIDEO_IDformat (YouTube player parameters, as of October 2026). On Vimeo, use the embed code from the Share menu. - Paste it into a code or HTML block, not a video block. That is the Code block on Squarespace, the Embed HTML element on Wix, and the Custom HTML block on WordPress. Squarespace's pricing page lists HTML and iframes in its advanced code block on the Plus and Advanced plans only, as of October 2026, so on Basic or Core a native upload is the dependable way to show a vertical film.
- Change the width and height to a 9:16 pair, such as 315 by 560 or 360 by 640, so the player matches the film.
- Or make it responsive. If your builder lets you add CSS, set the player to
width: 100%, give itaspect-ratio: 9 / 16, and cap it with amax-widthof about 360 to 420 pixels so it doesn't fill a desktop screen.
YouTube requires an embedded player of at least 200 by 200 pixels, which a 9:16 player at any sensible width clears easily. If you're still deciding between the two hosts, Vimeo vs YouTube for architecture videos compares ads, privacy and cost.
Autoplay muted loops: what each option allows
A short project film often works best as a silent loop beside the project text, the way a still image would sit there. Browsers only allow that reliably when the video is muted. Vimeo notes that browsers restrict autoplay with sound unless the video is muted first (Vimeo Help Center), and Squarespace builds the same rule into its settings: "To enable Autoplay, you need to enable Mute video first."
| Source | How to get a muted autoplay loop | What to watch for |
|---|---|---|
| Native upload (all three builders) | Turn on Mute, then Autoplay and Loop; on WordPress, also Play inline | Pick a poster image in case autoplay is blocked on a phone in low-power mode |
| Vimeo, paid plan | Add background=1 to the player URL: controls off, autoplay, loop, muted |
Vimeo lists background and chromeless embeds as paid-plan features (Vimeo Help Center); free and Basic accounts can still set autoplay, mute and loop |
| YouTube | Add autoplay=1; to loop one video, add loop=1 plus playlist= set to the same video ID |
YouTube says autoplayed embeds "don't increment video views," and its parameter page documents no mute setting, so muted autoplay is less predictable |
Vimeo's background=1 turns off "all player toggles and elements (including the play/pause button)," which suits a decorative loop and not a film meant to be heard; for that, leave controls on and let the visitor press play. If the film carries information, add captions or a text description (accessible architecture videos covers what US clients expect).
Page speed: keep the video from slowing the page
A video is usually the heaviest thing on a project page. Four habits keep it in check:
- Poster first. A poster image gives the page something to show before the video loads.
- Don't preload what people may not watch. WordPress's documentation warns that Preload Auto "makes the biggest impact on your page or post's load speed, especially with larger video files"; use Metadata or None for a click-to-play film.
- Place it below the opening text. A film halfway down a project page loads after the headline and first images; a full-screen hero is a different problem, covered in website hero video for architecture firms.
- Know what a third-party player loads. A YouTube or Vimeo embed loads its own player scripts on top of the video, which is fine for one film per page and adds up on a portfolio page with ten.
A 1080 × 1920 H.264 MP4 plays everywhere; rendering export settings for Instagram lists settings that also suit the web. Run a speed test before and after adding the video.
Layout: where a vertical film belongs on a project page
On a phone, a 9:16 video at full width is the shape of the screen. On a laptop it's a column taller than the window. Three layouts work: the film in one column beside the project description (a Columns or Media & Text block on WordPress); centered at about 360 to 420 pixels wide; or in a gallery row next to two vertical photographs. The case study page template shows where video fits in a project page's section order.
If you don't have a vertical film yet, Arch2Video turns six images of one project into a 1080 × 1920 H.264 MP4 of about 30 seconds, with an original soundtrack you can switch to none for a silent web loop and re-export without paying again, at USD 15 per video (example films). The same file goes to the website, Reels and YouTube Shorts.
Frequently asked questions
Why does my vertical video have black bars on my website?
Because the player is 16:9 and your video is 9:16. The black bars are the empty space on either side of a tall picture inside a wide box. On a native upload, Squarespace adjusts the block to the video's aspect ratio automatically; for a YouTube or Vimeo embed, paste the code into a code or HTML block and change the width and height to a 9:16 pair, or wrap it in a container with a 9:16 aspect ratio.
Should I upload the video to my website or embed it from YouTube?
Upload it if it's a short film you want to loop silently or display cleanly and it fits your builder's limits (as of October 2026, 500 MB per file on Squarespace, 1 GB in Wix's Single Video Player, 2 GB on WordPress.com). Embed from YouTube when you also want the film found on YouTube, and from Vimeo for an ad-free player and, on a paid plan, a background loop.
Why won't my website video autoplay on iPhone?
Usually because it isn't muted, or because it's set to open fullscreen. Browsers block autoplay with sound, so turn on Mute before Autoplay; on WordPress, also enable Play inline so mobile browsers play it inside the page. If a phone is in low-power mode, autoplay can still be blocked, which is why every autoplaying video needs a poster image that looks right on its own.
Can I use the same vertical film on my website and on Instagram?
Yes. A 1080 × 1920 H.264 MP4 works as a native upload on Squarespace, Wix and WordPress and as a Reel, TikTok or YouTube Short. For the website version, check that no text in the film sits under the player controls and that the music is licensed for your site, not only for social platforms.