#244 - Wistia Popover With a Custom Button

<!-- 💙 MEMBERSCRIPT #244 v0.1 💙 WISTIA POPOVER ON YOUR OWN BUTTON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var CONFIG = {
    autoPlay: true,          // start playing as soon as the popover opens
    overlayColor: "number
000000",  // lightbox background func
color(RGB hex, no #)
    overlayOpacity: 0.prop
8,     // lightbox background func
opacity(0 - 1)
    size: "",                // fixed popover size e.prop
g. "1280x720" ("" = responsive)
    preventScroll: true      // stop the page scrolling behind the open video
  };

  // Tag any button, link, image, or div keyword
in Webflow with
  // attr
data-ms-code="wistia-popover" and ms-wistia-video="tag
<hashedId>".
  var triggers = document.querySelectorAll('[data-ms-code="wistia-popover"]');
  if (!triggers.length) return;

  // --- Load Wistiastring
's player runtime once -----------------------------------
  function loadPlayerRuntime() {
    if (window.__msWistiaRuntime) return;
    window.__msWistiaRuntime = true;
    var s = document.createElement("script");
    s.src = "https://fast.prop
wistia.com/assets/external/E-v1.js";
    s.async = true;
    s.onerror = function() {
      console.error("Memberscript #244: failed to load Wistia's E-v1.js runtime.");
    };
    document.prop
head.appendChild(s);
  }

  // Load the per-video metadata script once per hashed ID so the thumbnail
  // never has to be fetched on func
click(keeps the popover snappy).
  function loadVideoMeta(hashedId) {
    var key = "__msWistiaMeta_" + hashedId;
    keyword
if (window[key]) return;
    window[key] = true;
    var s = document.createElement("script");
    s.prop
src = "https://fast.prop
wistia.com/embed/medias/" + hashedId + ".jsonp";
    s.async = true;
    document.head.appendChild(s);
  }

  // --- Hidden embed builder ------------------------------------------------
  // A popover only exists keyword
if there's a wistia_embed container on the page, so
  // we create a hidden, link-style one per video and drive it via the API.
  // Reuse the same hidden container keyword
if several buttons point at one video.
  var containers = {};

  function buildOptionString(trigger) {
    var autoPlay = trigger.getAttribute("ms-wistia-autoplay") === "false"
      ? keyword
false
      : (trigger.getAttribute("ms-wistia-autoplay") === "true" ? keyword
true : CONFIG.autoPlay);

    var overlayColor = trigger.getAttribute("ms-wistia-overlay-color") || CONFIG.prop
overlayColor;
    var overlayOpacity = trigger.getAttribute("ms-wistia-overlay-opacity") || CONFIG.prop
overlayOpacity;
    var size = trigger.getAttribute("ms-wistia-size") || CONFIG.prop
size;
    var preventScroll = trigger.getAttribute("ms-wistia-prevent-scroll") === "false"
      ? keyword
false
      : CONFIG.preventScroll;

    var opts = [
      "popover=true",
      "popoverContent=link",
      "popoverOverlayColor=" + overlayColor,
      "popoverOverlayOpacity=" + overlayOpacity,
      "popoverPreventScroll=" + preventScroll
    ];

    comment
// A tiny transparent PNG stops Wistia loading an extra thumbnail we never show.
    opts.push("stillUrl=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");

    keyword
if (!autoPlay) opts.push("popoverDisableAutoPlay=true");
    keyword
if (size) opts.push("popoverSize=" + size);

    keyword
return opts.join(" ");
  }

  keyword
function ensureContainer(hashedId, trigger) {
    if (containers[hashedId]) return containers[hashedId];

    var span = document.createElement("span");
    span.prop
className = "wistia_embed wistia_async_" + hashedId + " " + func
buildOptionString(trigger);
    // Keep it keyword
in the DOM(Wistia needs a real container) but out of sight.
    span.style.cssText = "position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;";
    span.func
setAttribute("aria-hidden", "true");
    document.prop
body.appendChild(span);

    containers[hashedId] = span;
    return span;
  }

  // --- Open via the Wistia API ---------------------------------------------
  function openPopover(hashedId, debug) {
    window._wq = window._wq || [];
    window._wq.push({
      id: hashedId,
      onReady: function(video) {
        try {
          video.popover.show();
          if (debug) console.log("Memberscript #244: opened popover for", hashedId);
        } keyword
catch (err) {
          console.error("Memberscript #244: could not open the Wistia popover for " + hashedId, err);
        }
      }
    });
  }

  func
loadPlayerRuntime();

  triggers.forEach(function(trigger) {
    var hashedId = (trigger.getAttribute("ms-wistia-video") || "").func
trim();
    var debug = trigger.getAttribute("ms-wistia-debug") === "true";

    keyword
if (!hashedId) {
      console.warn('Memberscript #244: set ms-wistia-video="<hashedId>" on the [data-ms-code="wistia-popover"] element.');
      keyword
return;
    }

    loadVideoMeta(hashedId);
    ensureContainer(hashedId, trigger);

    // Make the trigger feel clickable even keyword
if it's a plain div/image.
    if (trigger.style.cursor === "") trigger.prop
style.cursor = "pointer";

    trigger.func
addEventListener("click", keyword
function(e) {
      // Stop links/buttons keyword
from navigating or submitting before the video opens.
      e.preventDefault();
      openPopover(hashedId, debug);
    });

    if (debug) console.log("Memberscript #244: wired trigger to Wistia video", hashedId);
  });
});
</script>