Hover Image – Change Video

Description

change video on hover image
view demo – password: abc
buy me a coffee

#1.1. First, add some Image Blocks, something like this

#1.2. Adding word #s01, #s02… to Image Alt, something like this

#1.3. Add some Video Blocks & add text #s01, #s02.. to Video Description, like this (code will match text of both to ensure the effect works correctly)

#1.4. Next, hover on top right of section > click EDIT SECTION > at Design > Anchor Link > enter word: hover-img-video

#1.5. Hover on Page where you use Button Blocks > Click Gear icon

#1.6. Click Advanced > Paste this code

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

<!-- 07.26c31v9 Hover Image - Change Video -->
<script>
window.HICVConfig = {
  sectionSelector: 'section[id*="hover-img-video"]',
  imageSelector: '.sqs-block-image',
  videoBlockSelector: '.sqs-block-video',
  captionSelector: '.video-caption-wrapper',
  captionTextSelector: '.video-caption',
  hideCaption: true,
  showVideoOnInitial: true,
  initialActiveKey: '',
  pauseOnSwitch: true,
  pauseMode: 'reset',
  activeImageStyle: {
    opacity: '0.6'
  }
};
</script>
<script src="https://code.beaverhero.com/imageblock/0726c31v9hoverimgchangevideo.js"></script>

#2. Customize

#2.1. To adjust style of active image, change this line

activeImageStyle: {
   opacity: '0.6'
 }

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Code Injection, you can edit current page > Add a Markdown Block.

Use this code into Markdown Block

<script>
window.HICVConfig = {
  sectionSelector: 'section[id*="hover-img-video"]',
  imageSelector: '.sqs-block-image',
  videoBlockSelector: '.sqs-block-video',
  captionSelector: '.video-caption-wrapper',
  captionTextSelector: '.video-caption',
  hideCaption: true,
  showVideoOnInitial: true,
  initialActiveKey: '',
  pauseOnSwitch: true,
  pauseMode: 'reset',
  activeImageStyle: {
    opacity: '0.6'
  }
};
</script>
<script src="https://code.beaverhero.com/imageblock/0726c31v9hoverimgchangevideo.js"></script>