Clickable Video Block with Link Overlay

What You'll Create

A clickable video block that links to any URL when clicked. By placing a link in the video's description/caption and using CSS to expand that link over the entire video area, visitors can click the video to navigate anywhere—while the video continues to autoplay in the background.

The Problem It Solves

Squarespace video blocks aren't natively clickable—they just play video. When you want an autoplaying background video that also functions as a link (to a project page, external site, or any URL), this CSS technique makes the entire video clickable without disrupting playback.

Perfect For

  • Video hero sections linking to full content

  • Portfolio previews that link to case studies

  • Product showcases linking to shop pages

  • Campaign videos linking to landing pages

  • Any autoplaying video needing link functionality

What Makes This Different

The technique uses a pseudo-element on the caption link to create an invisible overlay covering the entire video block. This approach is clean and minimal—just a few lines of CSS—and works specifically with autoplaying videos where controls are hidden. The link destination is set right in the video's description field, making it easy to update.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: Video block set to autoplay without controls. Link URL added to video description/caption.

  • Toolkit Title: Clickable Video Block

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Previous
Previous

Scrolling Marquee with Linked Image and Text

Next
Next

Video Carousel for Squarespace