# Squarespace: play video/text/overlay on hover image

**URL:** <https://community.elfsight.com/t/squarespace-play-video-text-overlay-on-hover-image/167712>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 10, 2026, 8:41am UTC](https://community.elfsight.com/t/squarespace-play-video-text-overlay-on-hover-image/167712 "2026-07-10T08:41:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 10, 2026, 8:41am UTC](https://community.elfsight.com/t/squarespace-play-video-text-overlay-on-hover-image/167712/1 "2026-07-10T08:41:12Z")

</div>

To play video/text/overlay on hover image (video poster image) in Squarespace, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/9/a9c11789bf8ced7ae78b24b0b6f571caac507dd9.jpeg)

**#1.1.** Make sure you added Video Blocks and upload your desired video (Code won’t work with Youtube/Vimeo)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/a/8a94f6bf5a2218e32be8aa49718b7705fbe009a1.jpeg)

**#1.2.** Make sure you added Description text + Add Link

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/6/76577343ec34e0ee8ab6c055b08a9bb4a16997bd.jpeg)

**#1.3.** Hover on top right of section \> Click EDIT SECTION

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/3/e34fca6a722ed949cea59ef7cd1013d68842c95b.png)

**#1.4.** at Design \> Anchor Link \> enter word: **hover-imgvideo**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/1/118b6563f2a4a9f11f0e134843fb17c51ad36d0d.jpeg)

**#1.5.** Hover on page where you use Video Blocks \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/0/00f0c6835fb31ba008932b4512ec74fb46be67db.png)

**#1.6.** Click Advanced \> Paste this code

- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

```auto
<!-- 07.26c06v1 Hover Image - Play Video/Show Text/Overlay -->
<script>
  window.HoverImageVideoConfig = {
    sectionSelector: 'section[id*="hover-imgvideo"]',
    overlayColor: 'rgba(0, 0, 0, 0.35)',
    textColor: '#ffffff',
    textSize: '18px',
    edgeOffset: '20px',
    transitionDuration: '0.4s',
    videoFit: 'cover',
    muteOnHover: true,
    resetOnLeave: false,
    openInNewTab: false
  };
</script>
<script src="https://code.beaverhero.com/video/0726c06v1hoverplayvideotextoverlay.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/9/3920276e0ffa50cf11bae625d174249e91391328.jpeg)

**#2.1.** To change overlay color, change Line 05

```auto
overlayColor: 'rgba(0, 0, 0, 0.35)',

```

**#2.2.** To change text size/text color, change Line 06, Line 07

```auto
textColor: '#ffffff',
    textSize: '18px',

```

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown in current page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/5/a5b7c63b8bf5d6bd492784a712cbb1709ce8e8e0.png)

Add this code into Markdown

```auto
<script>
  window.HoverImageVideoConfig = {
    sectionSelector: 'section[id*="hover-imgvideo"]',
    overlayColor: 'rgba(0, 0, 0, 0.35)',
    textColor: '#ffffff',
    textSize: '18px',
    edgeOffset: '20px',
    transitionDuration: '0.4s',
    videoFit: 'cover',
    muteOnHover: true,
    resetOnLeave: false,
    openInNewTab: false
  };
</script>
<script src="https://code.beaverhero.com/video/0726c06v1hoverplayvideotextoverlay.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/f/2f96036e363579c036675a3389f7eee2551d977a.jpeg)