Show button at a specific video time (Wistia)

Hello guys,

I am happy to be among you.

I’m learning JS and I would like to make a button appear after 10min 11sec of my video hosted on Wistia.

After doing some research on the forum, I came across this post. Presumably the person was in the same situation as me. However, after trying this script, it doesn’t work.

Do you know why?

The post : Please help with this code!

Can’t really say anything without seeing your code.

The code posted in the thread you linked to is using jQuery so you need to include that if you haven’t.

Thanks for your quick reply.

I used this code for HTML button and video :

<div id="mybutton">
   <button>Click me</button>
</div>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_29b0fbf547" style="width:640px;height:360px;">&nbsp;</div>
<script>

This one for CSS :

#mybutton {
   opacity: 0;  // initially hide the button
}

.ShowMebutton{
   opacity: 1;   // show me the button!
}

So the button is hidden at start.
And used this code for JS :

<script>
window._wq = window._wq || [];

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

</script>

Normally, after 10 seconds, the button is supposed to show. But it is not the case.

  1. An id selector has higher specificity than a class selector.

  2. ShowMeButton and ShowMebutton is not the same (check the casing)

#mybutton.ShowMeButton {
   opacity: 1;
}

Thanks lasjorg for help. My bad for mistake.

Now, I edited to this :

<div id="mybutton">
   <button>Click me</button>
</div>


<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_29b0fbf547" style="width:640px;height:360px;">&nbsp;</div>



<script>
window._wq = window._wq || [];

_wq.push({ id: "29b0fbf547", onReady: function(video) {
  video.bind('secondchange', function(s) {
    if (s === 10) {
      $( "#mybutton" ).addClass( "ShowMeButton" );
    }
  });
}});

</script>

CSS
#mybutton {
   opacity: 0;  // initially hide the button
}

#mybutton.ShowMeButton {
   opacity: 1;
}

The problem is my JS script don’t add .ShowMeButton class after 10s video watched…

$( "#mybutton" ).addClass( "ShowMeButton" );

This line is supposed to add it. Can you help to understand why ?

Did you add jQuery?

Not sure where you are placing your CSS is but you can’t add CSS inside HTML without a <style> element. Also, // is not a valid CSS comment use /* comment */

Example code:

Yes used.

How can I add jQuery to Wordpress ?

Did you try searching for it?

I think WP comes with jQuery out of the box but they might have some compatibility guard. Try replacing $ with jQuery in the code.

1 Like

It worked! Thanks a lot mate!

1 Like