Transparent video field notes

Transparent Video in Squarespace: Plan the Embed Before You Export

Choose a Squarespace video block, custom code or hosted player for transparent video. Check plan permissions, source alpha and the published-page handoff.

Concept illustration of a coral bird in a transparent media frame above an ivory website canvas, beside file, code and poster cards
Original AI-generated editorial illustration; not a Squarespace screenshot, integration test or compatibility result.

For transparent video in Squarespace, choose the page integration before commissioning another export. A video block, an embed block and a custom player are different delivery routes. Confirm that your source contains usable alpha, that your Squarespace plan permits the intended code, and that the chosen player can present the asset with an appropriate fallback. A working file on your computer does not establish that a builder upload or published embed preserves the same result. Use current platform documentation to plan the route, then accept it only after reviewing the actual published page, including mobile layout and the nonmoving state.

What this guide establishes

This is a document-based planning guide from the AlphaPublish Editorial Team, checked on October 27, 2026. We sell transparent-video processing and optional hosting. We have not tested an AlphaPublish embed inside a Squarespace account for this article, and this is not a certified integration recipe, a device benchmark or an independent vendor review.

The practical problem is a handoff between two systems. Someone produces the moving subject, while a website owner chooses where and how it appears. A designer may deliver a transparent export that looks right in one viewer, yet the receiving person has only a standard video field or a plan that does not permit the necessary script. More exporting cannot resolve a permission or player mismatch.

Keep the decision narrow: you want a moving subject above a page background. You are not automatically asking for an interactive 3D object, an animation editor or a new website platform. If the original requirement includes rotating a model or clicking its individual parts, a rendered video may lose that interaction even when its background is transparent.

Separate the source, the block and the player

Start with three questions that have different owners. Does the delivered media contain the intended alpha? Which Squarespace component receives it? Which player ultimately displays it to visitors? Write down the answer to each before changing settings. This makes a vague report such as “the background turned black” much easier to investigate.

For the source, ask for the actual export and a representative frame over both light and dark backgrounds. A checkerboard baked into a picture is not transparency. If an ordinary MP4 was supplied when alpha was required, consult our MP4 transparency and export guide rather than assuming another website setting can recreate missing source information.

For the block, record whether the page uses a file upload, a recognized hosted-video URL, pasted embed code or custom HTML with a script. Those are different contracts. For the player, identify who maintains its media delivery and fallback behavior. An external host's player is not the same implementation as a browser's native video element.

Compare the Squarespace routes by what they receive

The current Squarespace video-block documentation describes direct uploads and YouTube or Vimeo URLs. It directs other hosted services and advanced embed requirements toward embed blocks. This identifies the supported entry points; it does not establish that a particular transparent export will retain alpha through the complete upload and playback path.

Route to investigateWhat you hand overWhat needs a separate check
Video blockAn eligible uploaded video or supported hosted-video URLWhether the complete delivery meets your transparency and playback requirements
Embed blockA compatible provider URL or manually supplied embed codeWhether the provider's code is accepted and presents the intended result
Code blockCustom HTML and, where permitted, the required player scriptPlan permission, code execution, layout, fallback and published-page behavior
Static visualAn image prepared for the page backgroundWhether motion is actually necessary for the page's purpose

None of these rows is a universal quality ranking. A standard rectangular video with familiar controls may be exactly right for an interview. A static product illustration may be sufficient beside a headline. A custom transparent player becomes relevant when the moving cutout and the surrounding page composition are part of the intended design.

Check code permission before buying delivery work

As of this review, Squarespace's code-block guide says JavaScript or iframe use in a code block requires a Core, Plus or Advanced plan. It also explains that HTML mode is used for rendering the relevant code rather than displaying it as a sample. Confirm your own current or legacy plan against the official documentation; this guide does not map every legacy entitlement.

Ask the person supplying an embed what it requires. Does it depend on a script, a custom element, an iframe or only ordinary media markup? Will an administrator need to approve the code? Is the person editing the page able to use the required component? Get those answers before treating a copied snippet as a finished deliverable.

If the required permission is absent, stop and agree on an allowed route. Options may include a static composition, an ordinary video presentation or a separately approved plan change. Do not buy a different exporter solely to compensate for a restriction it cannot change, and do not rely on undocumented workarounds to bypass the platform's plan boundary.

Distinguish an embed URL from a player implementation

The Squarespace embed-block guide discusses oEmbed providers and manually supplied code. It recommends code blocks for other custom code and warns that code customizations have support and compatibility limits. A media download URL, a preview page URL and a complete embed implementation therefore should not be treated as interchangeable handoff items.

Ask for a clearly labeled delivery package. It should identify the asset, the player instructions, where any script belongs and which fallback belongs to the asset. Do not paste a private preview address simply because it plays while you are signed in. Check that the agreed public resource is appropriate for visitors and that its expected availability matches the website's needs.

For a file-only route, someone must own media hosting and the page implementation. The MDN video-element reference describes native controls and poster options. These are useful implementation building blocks, not evidence that a particular encoded alpha file, custom player or website-builder path has been verified.

A source-to-page acceptance workflow

1. Describe the composition and the nonmoving result

Write a short acceptance statement: for example, a filmed presenter sits beside the headline, with the page background visible around the person. Name the intended desktop and mobile positions. Also decide what the visitor should see before loading or when motion is unavailable. This keeps the discussion about the visitor outcome rather than a preferred extension.

Keep essential information available without the motion. If the subject points toward a product feature, make the feature understandable in the surrounding text. A fallback should be a considered visual state, not an error box that obscures the page's primary action.

2. Inventory the actual deliverables

Record the source project, alpha export, poster, hosting owner and receiving page component. Keep an untouched copy of the supplied media. Inspect the difficult parts of the subject, such as fine edges and fast movement, instead of accepting a single attractive thumbnail as proof of the whole clip.

Use our transparent WebM guide for the output discussion. The separate question here is whether your receiving page has an appropriate integration route. A high-quality editing master should not be assumed to be a drop-in website asset merely because it contains alpha.

3. Confirm the permitted block and code requirements

Compare the delivery instructions with the site's actual permissions. Name one person responsible for the player code and another for the page layout if those responsibilities are split. Agree how they will exchange a minimal reproduction when the media loads but the composition is wrong.

Keep the first implementation simple. Avoid combining an unverified player, a new animation library and custom positioning rules in a single change. That is a troubleshooting method, not a promise that any particular script will execute in a given Squarespace template.

4. Review the published visitor view

Do not accept only an editor screenshot. Squarespace documents situations where custom code can appear differently while a site owner is logged in. Review the intended public page as a visitor and record the page URL, asset version, browser and date. If you cannot complete that review, keep the integration marked unverified.

Check the actual composition at desktop and narrow widths. Is the subject cropped? Does it cover a link or prevent a button from being clicked? Is an empty wrapper taking up unexpected space? These are page-layout questions; reprocessing the video is not the first response when the subject is already rendering correctly.

5. Check motion and fallback separately

A visible still image and a playing transparent animation are different acceptance states. Review both intentionally. If motion is unavailable, confirm that the fallback remains useful and that the page still communicates its message. Respect visitor preferences rather than asking people to disable accessibility settings to satisfy the design.

The MDN autoplay guide explains the policy considerations around automatic media playback. Treat autoplay as behavior to check in context, not an entitlement supplied by an export. A successful manual play does not establish every requested automatic-play condition.

6. Write the maintenance handoff

List who can replace the asset, renew any hosting arrangement and retest the published page after a change. Include a screenshot of the accepted composition and a note about the nonmoving state. Keep the relevant project and media versions so a future editor can distinguish a changed source from a changed integration.

This is where a stable hosted asset may be useful, but it does not remove the page owner's responsibility. A replacement can change the subject's size, framing or visual emphasis. Review the composition again even when the page's embed address stays the same.

Where AlphaPublish fits, and where another route is better

AlphaPublish's current public workflow offers transparent-video preparation, downloads and optional hosting with a stable embed and poster fallback. Review the hosting workflow, embed guide and compatibility information before choosing delivery. Its published HTML instructions are a starting point for understanding code requirements, not evidence that this article tested Squarespace integration.

Keep the standard Squarespace route when it already satisfies the job and its familiar playback presentation is desirable. Keep an appropriate interactive tool when visitors need to manipulate a scene. A paid transparent-video service does not automatically become the right answer merely because the source has a background you could remove.

For an AlphaPublish candidate, start with the currently available preview or checking workflow and review its limits before paying for preparation or hosting. Confirm the site plan and implementation responsibility first. This article does not promise universal conversion, unrestricted free processing, permanent hosting, forced autoplay or successful transparent playback on every browser and device.

Frequently asked questions

Does a Squarespace video block prove my uploaded video will stay transparent?

No. Its documentation establishes supported input routes, not a verified alpha result for your exact media and delivery. Review the actual source and published playback path. Do not infer that the platform always preserves alpha or always removes it from the evidence presented here.

Which Squarespace plan should I check for a script-based player?

Check the current code-block documentation and your site's own entitlement. The October 27, 2026 review found Core, Plus and Advanced named for JavaScript or iframe code blocks. Legacy plans need their own confirmation; this is not a pricing recommendation or a reason to upgrade before assessing the job.

Is an embed block the same thing as a code block?

No. Squarespace documents provider embeds separately from custom code. Identify what the supplied implementation contains and follow the appropriate current instructions. A downloadable media file, a provider page and a player script are different delivery items even if all three are described casually as an embed.

Why can a transparent clip look right while the page still looks wrong?

The media may be correct while its wrapper, dimensions, clipping or stacking interferes with the design. Inspect the published page separately from the source. Conversely, a correct layout cannot reconstruct alpha missing from the supplied media. Classify the failure before commissioning another export.

Has AlphaPublish been tested with Squarespace in this guide?

No. This is a primary-documentation planning and acceptance guide, with no account-level integration or device certification claimed. Its value is deciding what must be delivered and checked. Use a separately verified published-page test before accepting a specific Squarespace implementation for production.

← All field notes