CODEWITHSUNDEEP
javascriptiframewistia
Sapphire
Sapphire

Reputation: 1

Wistia and window._wq are undefined even though wistia scripts are present and video works

Got an issue I don't seem able to solve on my own. It's related to Wistia videos. I use embedding as an iframe (inline doesn't work for some reason), but I can't use the Wistia JavaScript API, the simple code they provide (and say should work for iframe) doesn't work for me:

window._wq = window._wq || [];
_wq.push({ id: "_all", onReady: function(video) {
  console.log("This will run for every video on the page. Right now I'm on this one:", video);
}});

When I try to console.log(window._wq) it's undefined. Wistia is undefined too. Both of these elements exist on other pages with the Wistia video. But the video itself loads and plays nicely, so why?

<iframe
  id="iframe__video"
  src="https://fast.wistia.com/embed/medias/p1kqcs67pi?playerColor=ff69b4&transcript=false"
  transcript="no"
  allowtransparency="true"
  frameborder="0"
  scrolling="no"
  class="wistia_embed wistia_async_p1kqcs67pi"
  name="wistia_embed"
  allowfullscreen=""
  mozallowfullscreen=""
  webkitallowfullscreen=""
  oallowfullscreen=""
  msallowfullscreen=""></iframe>
<script charset="ISO-8859–1" src='//fast.wistia.com/assets/external/E-v1.js' async></script>

Is there any way to interact with wistia video through javascript when it's in iframe? I get cross origin error when trying to get elements within iframe and wistia api seems not to work but maybe there is another way? I need to add event listeners to some buttons on video control. Thanks!

Upvotes: 0

Views: 1026

Answers (1)

Lou
Lou

Reputation: 11

It's been a while since you posted this, but I was struggling to figure out how to get Wistia player info to logged in GTM today and came across your post!

I'm very new to JS, GTM, GA4, and messing with APIs, but this is what helped me get the event information into the dataLayer:

In the starter app, go into edit/remix mode and replace the standard embed video they have in index.html with your video's iframe code.

Then, in wistia-player-stuff.js, just replace the id under the comment with your video's id (p1kqcs67pi).

When you run it and press play in the preview, it will work even though it's an iframe and not their standard JS embed (`You played the video!' etc will be appended to the doc).

My very-amateur solution for a listener was to add this custom HTML tag (triggered by determining if a Wistia embed exists on the page when window loaded):

<script>
window._wq = window._wq || [];
_wq.push({
  // The id of the video embedded in the page
  id: "[YOUR ID HERE]", //removed id to protect client IP

  // When the video becomes ready, we can run a function here, using `video` as a handle to the Player API.
  onReady: function (video) {
    video.bind("play", function () {
      dataLayer.push({
      event: "video",
      video_action: "play",});
      return video.unbind;
    });
  }
});

</script>

I think it seems like you know enough from here to set up what you'd want to log, and I'm not sure if you're doing stuff with the dataLayer or GTM or anything so I don't want to tack on any useless info.

Also recommend looking at this section on the JS API from Wistia.

I know I didn't totally answer your question (because I don't know much about event listeners), but I hope I at least demonstrated that it's possible to nab that info when you're using the iframe embed.

Upvotes: 1

Related Questions