Squarespace: play video/text/overlay on hover image

[tuanphan]

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

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

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

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

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

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

#1.6. Click Advanced > Paste this code

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

<!-- 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>

#2.1. To change overlay color, change Line 05

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

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

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

Add this code into Markdown

<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>