Wistia Videos: Adding a play / pause button overlay

Question

I'm attempting to add a play/pause button to a Wistia hosted video. I have it mostly working however when I add in multiple videos it's not targeting the current video. Instead when I click on the second video the first video plays.

Below is the HTML:

<div class="tqm-video-wrapper">
    <div class="tqm-video-overlay">
        <a class="tqm-play-btn">
        </a>
    </div>

    <!-- WISTIA IN PLACE VIDEO EMBED CODE -->
    <script src="https://fast.wistia.com/embed/medias/j04n260140.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_j04n260140 videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
    </div>
    </div>                          
    <!-- END WISTIA IN PLACE VIDEO EMBED CODE -->

</div>

Below is the script:

window._wq = window._wq || [];

    _wq.push({ id: "_all", onReady: function(wistiaEmbed) { 

        var wistiaHash = $(".wistia_embed").attr("id", "wistiaGenID_" + wistiaEmbed.hashedId());
        var wistiaHashId = wistiaEmbed.hashedId();          

            // grab Wista API
            wistiaEmbed = Wistia.api(wistiaHashId);

            // when the video is stopped
            wistiaEmbed.bind("end", function() {                     
              $(this).find('.tqm-video-overlay').fadeIn("slow");
            });

            //when the video is paused
            wistiaEmbed.bind("pause", function() {
              $('.tqm-video-wrapper').find('.tqm-video-overlay').fadeIn("slow");
            });

            //when the video time changes
            wistiaEmbed.bind("secondchange", function() {
             $(this).find('.tqm-video-overlay').fadeOut("slow");
            });  

            // when you click the custom play button
            $('.tqm-video-overlay').click(function() {
                if ($(this).parent().has(".wistia_embed")) {
                    wistiaEmbed.play();
                    $(this).fadeOut("slow");
                }                       
            });     
    }
});

Here is a link to a jsfiddle: https://jsfiddle.net/eilawen/bggu5s1q/7/

Is someone able to point me in the right direction? Thanks in advance.

Answer 1

Replace <VIDEO_ID> with your wistia Video ID

This will works

<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_<VIDEO_ID>" style="width:640px;height:360px;"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<script>
    window._wq = window._wq || [];
    _wq.push({
        id: "<VIDEO_ID>", onReady: function (video) {
            console.log("I got a handle to the video!", video);
        }
    });
    $("#play").click(function () {
        _wq.push({
            id: "<VIDEO_ID>", onReady: function (video) {
                video.play();
            }
        });
    })
    $("#pause").click(function () {
        _wq.push({
            id: "<VIDEO_ID>", onReady: function (video) {
                video.pause();
            }
        });
    })
</script>