title: Why does Wistia popover take two clicks to play?
body: <p>In my example below, I'm trying to lazyload the scripts Wistia uses to play a video. In this case, I'm not using an embedded video. Instead, I'm using a popover video. The script dependencies that Wistia videos need are loaded first, and then the video is supposed to play. When watching the network tab in dev tools, the scripts are loaded on the first click, but it takes a second click to play the video.</p>
  <p><strong>Why does it take 2 clicks to play this video?</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const getVideoId = (wistia_vid) =&gt; {
    const classes = Array.from(wistia_vid.querySelector(".wistia_embed").classList);
    const idClass = classes.find((cls) =&gt; cls.startsWith("wistia_async_"));
    const id = idClass.replace("wistia_async_", "");
  
    return id;
  };
  const removeElems = (wistia_vid) =&gt; {
    const toRemove = Array.from(
      wistia_vid.querySelectorAll(".wistia__overlay, .embed-youtube__play, .embed-video__play")
    );
  
    toRemove.forEach((node) =&gt; node.remove());
  };
  
  Array.from(document.querySelectorAll(".wistia")).forEach((node) =&gt; {
    node.addEventListener("click", () =&gt; {
      const videoId = getVideoId(node);
      let wistiaSupportScripts = [
        //adds jsonp file to provide security over requests
        `https://fast.wistia.com/embed/medias/${videoId}.jsonp`,
        `https://fast.wistia.com/assets/external/E-v1.js`,
        
      ];
  
      removeElems(node);
  
      //loads supporting scripts into head
      for (var i = 0; i &lt; wistiaSupportScripts.length; i++) {
        let wistiaSupportScript = document.createElement("script");
        wistiaSupportScript.src = wistiaSupportScripts[i];
        let complete = false;
        if (
          !complete &amp;&amp;
          (!this.readyState ||
            this.readyState == "loaded" ||
            this.readyState == "complete")
        ) {
          complete = true;
        }
  
        let wistiaContainers = document.querySelector(".wistia");
  
        wistiaContainers
          ?
          document
          .getElementsByTagName("head")[0]
          .appendChild(wistiaSupportScript) :
          console.log("No Wistia videos here.");
      }
  
      window._wq = window._wq || [];
      _wq.push({
        //globally scoped
        id: videoId,
        options: {
          autoPlay: true,
          volume: 0.5,
        },
  
        onReady: function (video) {
          video.bind("play");
        },
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>//button
  .btn--blue {
    background: #005fec;
    color: #fff;
    text-decoration: none;
  }
  
  .btn--blue {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    position: relative;
    border-radius: 4px;
    transition: all 200ms ease;
    cursor: pointer;
    box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.14);
    width: fit-content;
    font-size: 1rem;
    line-height: 1.25rem;
    padding: 1rem 2rem;
  }
  
  .wistia {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
  }
  
  .wistia__overlay {
    width: 100%;
    height: auto;
  }
  
  .wistia::before {
    display: block;
    content: "";
  }
  
  .wistia_embed,
  .wistia embed,
  .wistia iframe {
    width: 100%;
    max-height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wistia"&gt;
    &lt;div class="wistia_embed wistia_async_vhkqhqhzyq popover=true popoverContent=link"&gt;
      &lt;a href="#oquote-hero-section" class="btn--blue"&gt;
        &lt;span class="btn__txt"&gt;Meet the team&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;          
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>