Video Block Lightbox

Description

• click Video Block will open video in lightbox
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Hover on Page where you use Video Blocks > Click Gear icon

#1.2. Click Advanced > Paste this code

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

<!-- 07.26c23v3 Video Block Lightbox -->
<script>
window.VideoBlockLightboxConfig = {
  scope: "",
  overlayColor: "rgba(0,0,0,0.85)",
  popupMaxWidth: "860px",
  loadingText: "Loading...",
  loadingFontSize: "14px",
  closeIconSize: "20px",
  closeIconColor: "#ffffff"
};
</script>
<script src="https://code.beaverhero.com/video/0726c23v3videoblocklightbox.js"></script>

#2. Customize

#2.1. To change overlay color behind video, change line 05

overlayColor: "rgba(0,0,0,0.85)",

#2.2. To change Video Lightbox size, change line 06

popupMaxWidth: "860px",

#2.3. To change text “Loading” and close icon size, change line 07 to line 10

loadingText: "Loading...",
  loadingFontSize: "14px",
  closeIconSize: "20px",
  closeIconColor: "#ffffff"

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block (1 Markdown only) under Video Blocks

Then add this code into Markdown Block

<script>
window.VideoBlockLightboxConfig = {
  scope: "",
  overlayColor: "rgba(0,0,0,0.85)",
  popupMaxWidth: "860px",
  loadingText: "Loading...",
  loadingFontSize: "14px",
  closeIconSize: "20px",
  closeIconColor: "#ffffff"
};
</script>
<script src="https://code.beaverhero.com/video/0726c23v3videoblocklightbox.js"></script>