0

Hi I am trying to get a button to appear beneath my video after 30 mins and 30 seconds. When I contacted Wistia support they gave me this link and told me they were not coders and couldn't help me further. I don't know anything about javascript and I do know a bit of CSS. I read a post on another website here and copied it to my site hoping that it would work. I added the javascript code beneath the inline embed of my video, and then put the CSS in the customize additional css editor in wordpress.

When I did it part of it worked and the button I had there disappeared, but when I tried to trigger it at the 30min 30sec mark it never appeared and I haven't been able to get it to appear at all. Here is a link to the page for you to view it and below is the code that I have used to embed the video as well as the css to hide the button. Any help would be greatly apprecited as I am very new to this.

Here is the code I used on the video embed:

<script src="https://fast.wistia.com/embed/medias/c5khj4dcbi.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_c5khj4dcbi videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/c5khj4dcbi/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
<script>
window._wq = window._wq || [];

// target our video by the first 3 characters of the hashed ID
_wq.push({ id: "c5khj4dcbi", onReady: function(video) {
  // at 1830 seconds (30.5min x 60 = 1830), do something amazing
  video.bind('secondchange', function(s) {
    if (s === 1830) {
      // Insert code to do something amazing here
      // console.log("We just reached " + s + " seconds!");
   $( "#mybutton" ).addClass( "ShowMeButton" );
    }
  });
}});

</script>

And here is the CSS I used on the wordpress editor customize > additional CSS:

.page-id-741 #mybutton {
   opacity: 0;
}
.ShowMeButton {
   opacity: 1;
    filter:alpha(opacity=100);
}
Justin
  • 1

1 Answers1

0

I'm assuming you're skipping through the video to hit the point where the script runs.

Using the Wistia .secondsPlaying() function, it only shows the actual number of seconds the user has played the video for.

The function you're looking for is .time(), which outputs the actual location of the user in the video, in seconds.

Try this:

<script>
  var videoTrigger = false;
  window._wq = window._wq || [];
  _wq.push({ id: 'xxxxxxxx', onReady: function(video) {
    video.bind("secondchange", function() {
      if (video.time() >= 1830 && videoTrigger !== true) {
        videoTrigger = true;
        console.log("Run code here");
      }
    });
  }});
</script>

Note that this code will also activate if the user skips past the activation point (as it uses >= and a variable instead of just ===).

kelbal
  • 1