Video reveal on hover text

Description

• hover text will show video
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, highlight text > enter url with format: #tooltipvideo_VIDEO-URL

Something like this.

#tooltipvideo_https://www.youtube.com/watch?v=w4GeicVR_fQ

or this

#tooltipvideo_https://vimeo.com/438467923

#1.2. Hover on Page where you use Text Block > Click Gear icon

#1.3. Click Advanced > Paste this code

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

<!-- 07.26c28v5 Video reveal on hover text -->
<script>
window.VideoTooltipConfig = {
  selector: 'a[href*="#tooltipvideo_"]',
  showControls: false,
  muted: true,
  loop: true,
  showDelay: 150,
  hideDelay: 3000,
  position: 'top',
  offset: 12,
  fadeDuration: '200ms',
  width: '320px',
  aspectRatio: '16 / 9',
  backgroundColor: '#000000',
  borderRadius: '10px',
  padding: '0px',
  boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
  showArrow: true,
  arrowSize: 7,
  followScroll: true
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c28v5videorevealonhovertext.js"></script>

#2. Customize

All style options in Line 05 to Line 21

showControls: false,
 muted: true,
 loop: true,
 showDelay: 150,
 hideDelay: 3000,
 position: 'top',
 offset: 12,
 fadeDuration: '200ms',
 width: '320px',
 aspectRatio: '16 / 9',
 backgroundColor: '#000000',
 borderRadius: '10px',
 padding: '0px',
 boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
 showArrow: true,
 arrowSize: 7,
 followScroll: true

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Text Block.

Add this code into Markdown

<script>
window.VideoTooltipConfig = {
  selector: 'a[href*="#tooltipvideo_"]',
  showControls: false,
  muted: true,
  loop: true,
  showDelay: 150,
  hideDelay: 3000,
  position: 'top',
  offset: 12,
  fadeDuration: '200ms',
  width: '320px',
  aspectRatio: '16 / 9',
  backgroundColor: '#000000',
  borderRadius: '10px',
  padding: '0px',
  boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
  showArrow: true,
  arrowSize: 7,
  followScroll: true
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c28v5videorevealonhovertext.js"></script>