kentico youtube webpart used within slick.js -

i have repeater out puts panels slide show plugin, slick.js. far, things working planned.

the user, when creating custom page, enters in copy, either , image, video media library, or link tube.

what i'm trying write js function fire when user clicks play on youtube video.

the webpart injects youtube video via iframe method.

here's transformation:

<section class="slide">      <div class="copy">          <%# eval("slidecontent") %>      </div>      <asp:placeholder runat='server' id='slideimage' visible='<%# ifempty( eval("slideimage"), false, true )  %>'>          <div class="img">              <img class="img-responsive" src="<%# eval(" slideimage ") %>" alt="<%# eval(" slidecontent ") %>">          </div>      </asp:placeholder>      <asp:placeholder runat='server' id='slidevideo' visible='<%# ifempty( eval("slidevideo"), false, true )  %>'>          <div class='videoholder html5'>              <video id='video' class='html5video' controls>                  <source src='<%# eval("slidevideo") %>'>              </video>          </div>      </asp:placeholder>      <asp:placeholder runat='server' id='youtubevideo' visible='<%# ifempty( eval("youtubevideo"), false, true )  %>'>          <%@ register src="~/cmswebparts/media/youtubevideo.ascx" tagname="youtubevideo" tagprefix="webpart" %>              <div class='videoholder yt'>                  <webpart:youtubevideo runat="server" id="youtubevideowebpart" cssclass="ytvideo" videourl='<%# resolvemacros(eval("youtubevideo").tostring())%>' fullscreen='true' />              </div>      </asp:placeholder>  </section>

and here js (this includes code pause videos if slider changes)

$(function () {    'use strict';    var $slider = $('.slider'),      $slickjs = '/kffintranet/ui/bower_components/slick-carousel/slick/slick.min.js';      // check slider on page    if ($slider.length !== 0) {        // if there slider, load slick.js plugin      $.getscript($slickjs, function () {        // init  slider        $slider.slick({          dots: true,          infinite: true,          speed: 300,          slidestoshow: 1,          slidestoscroll: 1,          fade: false,          lazyload: 'ondemand',          adaptiveheight: true,          autoplay: true,          autoplayspeed: 5000,          responsive: [{              breakpoint: 1024,              settings: {}            }, {              breakpoint: 600,              settings: {}            }, {              breakpoint: 480,              settings: {                arrows: false              }            }            // can unslick @ given breakpoint adding:            // settings: "unslick"            // instead of settings object          ]        });      });        //        // video control. if slide has video, need pause        //bind our event here, gets current slide , pauses video before each slide changes.      $slider.on('beforechange', function (event, slick) {        var currentslide, player, command, videotype;          //find current slide element , decide player api need use.        currentslide = $(slick.$slider).find('.slick-current');          //determine type of slide looking video holder getting video type class        if (currentslide.find('.videoholder').length) {          videotype = $('.videoholder', currentslide).attr('class').split(' ')[1];          //get iframe inside slide.          player = currentslide.find('iframe').get(0);        }        // pause videos        if (videotype === 'yt') {          command = {            'event': 'command',            'func': 'pausevideo'          };          player.contentwindow.postmessage(json.stringify(command), '*');        } else if (videotype === 'html5') {          document.getelementbyid('video').pause();        }        });        // pause slider if video playing      // html 5 video click      $('.html5video').on('click', function () {        var $video = $(this).get(0);        // control pause play state of video        if ($video.paused) {          $video.play();        } else {          $video.pause();        }        // call slide pause function        pauseslide();      });      // youtube play      $('.ytvideo iframe').on('click', function () {        // call slide pause function        pauseslide();      });    }      // puse slider function    function pauseslide() {      $slider.slick('slickpause');      console.log('pause');    }  });

so i've created function pauseslide pause slider, i'm struggling capturing youtube play click.

check answer out. suggests using youtube iframe api.

<!doctype html> <html> <head> <script src="https://www.youtube.com/iframe_api"></script> </head> <body> <div id='vidwrapper'> <!-- <iframe> (and video player) replace <div> tag. --> <div id="ytplayer"></div> </div> <script> var player; function onyoutubeiframeapiready() { player = new yt.player('ytplayer', { height: '390', width: '640', videoid: 'm7lc1uvf-ve', events: { 'onstatechange': function(event) { if (event.data == yt.playerstate.playing) { pauseaudio(); } } } }); } function pauseaudio() { ... } </script> </body> </html>