Please help with this code!

JavaScript
#1

Hello,

So here’s what I want to do, I’m still learning HTML and CSS, still very new here but I’m in a situation where I’m forced now to apply a Javascript code. What I want to achieve is to add a button underneath a Wistia video player after the video plays for a specific time, let’s say 5 minutes.

So I’ve contacted the support for the Wistia video player, and they provided me with this link:

https://wistia.com/support/developers/player-api#trigger-an-event-at-a-specific-time

That’s all what they can provide me with. They said I have to be able to modify the code myself.

It looks like I have to change the code somehow to show a button:

So I want with the code provided to add that button after 5 minutes.

Please guys help me with this, I hope I’m not going against the rules, if so please please forgive me!

Thanks a lot!

Show button at a specific video time (Wistia)
#2

One way to do this is have a hidden button under your video player (hidden via CSS opacity: 0) and then either change that opacity:1 or addClass to your button to display it.

<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 || [];

// 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 === 300) {
      // Insert code to do something amazing here
      // console.log("We just reached " + s + " seconds!");
      $( "#mybutton" ).addClass( "ShowMeButton" );
    }
  });
}});

</script>


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

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

<div id="mybutton">
   <button>Click me</button>
</div>
1 Like
#3

I will try this! Thank you so much! I really appreciate it :smiley:

#4