CODEWITHSUNDEEP
javascriptjqueryapiwistia
Robert E
Robert E

Reputation: 740

Wistia API play/pause button

I am working with the Wistia API and want one link which will toggle the Wistia video to play and pause. I am having no issues at all getting the video to play or pause independently but when I toggle the class on an element, it no longer seems to work. What am I doing wrong? Any ideas?

$( ".video-pause" ).click(function() {
    wistiaEmbed.pause();
});
$( ".video-play" ).click(function() {
    wistiaEmbed.play();
});
$( "#video-play-pause" ).click(function() {
     $("#video-play-pause").toggleClass("video-pause").toggleClass("video-play");
});

Upvotes: 1

Views: 2260

Answers (2)

PSabuwala
PSabuwala

Reputation: 155

Wistia has its default methods to handle this, Here wstObject is object of frame.

this.wstObject.bind("play", function () { /* goes here when click play */ });
this.wstObject.bind("end", function (t) { /* goes here when video has ended */ });
this.wstObject.bind("pause", function (t) { /* goes here when click pause */ });

Upvotes: 0

Tahmina Khatoon
Tahmina Khatoon

Reputation: 1091

This all about jQuery data binding. Use 'on', it will be solved. So the code will be -

$(document).on('click', '.video-pause', function() {
    wistiaEmbed.pause();
});
$(document).on('click', '.video-play', function() {
    wistiaEmbed.play();
});
$( "#video-play-pause" ).click(function() {
     $("#video-play-pause").toggleClass("video-pause").toggleClass("video-play");
});

Upvotes: 1

Related Questions