MXNV.jpg
MXNV.jpg

MXNV Native Video Revamp

$55.00

Outline:

A full JS/CSS Revamp of the Squarespace 7.1 Native Video Block (and use your Squarespace video storage!). Play local videos of any size and ratio, vertical, horizontal, and even 1:1 Square. HLS modifications ensure video waits a moment so that it begins at high quality instead of starting crappy (this can be turned off optionally). Full screen continues play from current position. The player also features a text-based watermark which allows you to include your brand/URL top left of the player (no matter the size). Font settings can be updated near the beginning of the code block.

Compatibility & Limitations:

Squarespace 7.1 Designed for Pages

Scroll Down for Features, Instructions & Live Demo▼

Outline:

A full JS/CSS Revamp of the Squarespace 7.1 Native Video Block (and use your Squarespace video storage!). Play local videos of any size and ratio, vertical, horizontal, and even 1:1 Square. HLS modifications ensure video waits a moment so that it begins at high quality instead of starting crappy (this can be turned off optionally). Full screen continues play from current position. The player also features a text-based watermark which allows you to include your brand/URL top left of the player (no matter the size). Font settings can be updated near the beginning of the code block.

Compatibility & Limitations:

Squarespace 7.1 Designed for Pages

Scroll Down for Features, Instructions & Live Demo▼

MX Native Video Guide

MX NATIVE VIDEO REVAMP

Unlock true aspect-ratio freedom for your Squarespace videos. This script bypasses Vimeo/YouTube constraints, enabling native, watermark-ready video players that adapt to your source files.

:: Features & Specifics

Native Ratio Freedom: The video block naturally reshapes to match the exact source file you upload. No more forced crops or fixed-aspect gutters.
Integrated Watermarking: Apply professional, auto-scaling text watermarks directly through the stylesheet.
Multi-Instance Performance: Run multiple videos concurrently; the script scopes to individual instances without cross-talk.
Responsive Vertical Viewport Scaling: Videos will stay within the visual height of the page, ensuring they are never vertically cut-off by the browser window, no matter the device.

:: Configuration Settings

ConstantDescriptionConfiguration
wm-contentWatermark text string"MATRIARX.COM"
video-roundnessCorner radius15px
desktop-max-heightResponsive ceiling95vh
wm-colorText opacity/colorrgba(255,255,255,0.7)
wm-fontTypography stack'Syncopate'

:: Compatibility & Limitations

Specifically engineered for Squarespace 7.1 layouts.

:: Installation & Technicals

Drop the script into your site’s Settings > Developer Tools > Code Injection > Header. Once active, the script automatically parses your standard Squarespace video blocks to strip constraints and enable full-control playback.


The system utilizes a MutationObserver to ensure that as your video metadata loads, the container dynamically snaps to match your media’s native dimensions. All branding and visual constraints are managed via the CSS variables block at the top of the code, allowing you to edit the watermark font, color, and positioning independently of the playback logic.


Scroll down to see the live implementation demo. ▼
MX NATIVE VIDEO v1.0 · Copyright Lucas Gaudette.
PART OF THE MATRIARX UNIVERSE

MXNV: NATIVE VIDEO REVAMP (Demo)