Show button at a specific video time (Wistia)

JavaScript
1

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!

2

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.

3

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.

4

  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;
}
5

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 ?

6

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:

7

Yes used.

How can I add jQuery to Wordpress ?

8

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
9

It worked! Thanks a lot mate!

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.