Click Button – Show Video

Description

• change video on button click
• view demo – password: abc
• buy me a coffee

#1. Install Code

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

#1.2. Add some Video Blocks & add text LINK to Video description, like this

#1.3. Make sure you enter URL to text “LINK” same as link in Button Block (code will match the URLs 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: cbsv

#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.26c31v10 Click Button - Show Video -->
<script>
window.CBSVConfig = {
  sectionSelector: 'section[id*="cbsv"]',
  buttonSelector: '.sqs-block-button-element',
  videoBlockSelector: '.sqs-block-video',
  captionSelector: '.video-caption-wrapper',
  captionLinkSelector: '.video-caption a',
  hideCaptionLink: true,
  showVideoOnInitial: true,
  initialActiveUrl: '',
  pauseOnSwitch: true,
  pauseMode: 'reset',
  activeButtonStyle: {
    background: '#111111',
    color: '#ffffff'
  }
};
</script>
<script src="https://code.beaverhero.com/buttonblock/0726c31v10clickbuttonshowvideo.js"></script>

#2. Customize

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

activeButtonStyle: {
  background: '#111111',
  color: '#ffffff'
}

#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.CBSVConfig = {
  sectionSelector: 'section[id*="cbsv"]',
  buttonSelector: '.sqs-block-button-element',
  videoBlockSelector: '.sqs-block-video',
  captionSelector: '.video-caption-wrapper',
  captionLinkSelector: '.video-caption a',
  hideCaptionLink: true,
  showVideoOnInitial: true,
  initialActiveUrl: '',
  pauseOnSwitch: true,
  pauseMode: 'reset',
  activeButtonStyle: {
    background: '#111111',
    color: '#ffffff'
  }
};
</script>
<script src="https://code.beaverhero.com/buttonblock/0726c31v10clickbuttonshowvideo.js"></script>