Video Page Lightbox

Description

• click video item in Video Overview Page will open Video in Lightbox
• it supports Vimeo, Youtube, uploaded videos
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you added Video to Video Detail Page

Something like this. You can use Vimeo or Youtube or upload video

#1.2. Click Gear icon on Video Page

Click Advanced > Page Header Code Injection

Paste the code

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

<!-- 06.26c01v13 Video Page Video Lightbox -->
<script>
window.VimeoLightboxConfig = {
  overlayColor: "rgba(0,0,0,0.85)",
  loadingText: "Loading...",
  popupMaxWidth: "860px",
  loadingFontSize: "14px",
  closeIconSize: "20px",
  closeIconColor: "#ffffff"
};
</script>
<script src="https://code.beaverhero.com/video/0626c01v13videopagevideolightbox.js"></script>

#2. Customize

#2.1. To change Overlay Color, change Line 04

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

#2.2. To change “Loading…” text and Loading text size, change Line 05, Line 07

loadingText: "Loading...",
loadingFontSize: "14px",

#3. Other

#3.1. If your plan is Personal/Basic Plan and it doesn’t support Injection, you can edit Video Page (or edit Site Footer) > Add a Block

Choose Markdown

Paste this code into Markdown

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