Jump to content

Play background video when entering view-port?

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://heptagon-halibut-debs.squarespace.com


I like the background video feature in which you can add background videos to sections, however, is there a way to play the video upon scrolling to it when it enters the viewport? Background videos auto-play by default, and I would like the video to play when the user eventually scrolls to it.

My website is just one of the templates on Squarespace, with a 4k video of Costa Rica video linked in one of the sections towards the bottom. How would I do this to that video as an example?

Link to comment
  • 1 year later...
  • Solution
On 8/17/2020 at 1:09 AM, Fuzzz said:

is there a way to play the [background] video upon scrolling to it when it enters the viewport?

@katielynn It is possible to code this using JavaScript but as it isn't straightforward you may want to take a look at this paid plugin called Background Videos Utils.

It can pause/play Youtube and/or Vimeo background videos as they come into the viewport.

Did this help? Please give feedback by clicking an icon below  ⬇️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.