Play/pause buttons don't work
I created 2 buttons for play/stop and it doesn't work. My code below
$('#vidheader').YTPlayer({ videoId: ytLink, mute: false, playButtonClass: 'YTPlayer-play', pauseButtonClass: 'YTPlayer-pause', width: $(window).width(), playerVars: { iv_load_policy: 3, modestbranding: 1, autoplay: 1, controls: 0, showinfo: 0, wmode: 'opaque', branding: 0, autohide: 0, rel: 0 } });
<div id="vid_controls" class="glb-center"> <a id="play" class="YTPlayer-play youbtn youplay" href="#"><img class="glb-max-width" src="<?php bloginfo('template_directory'); ?>/img/play-movie.png" alt=""/></a> <a class="YTPlayer-pause youbtn youpause" href="#"><img class="glb-max-width" src="<?php bloginfo('template_directory'); ?>/img/play-pause.png" alt=""/></a> </div>
when I click on any of mu buttons nothing happenes. What's wrong with my code?
Add this code after line 151:
After this code:
// Listen for Resize Event self.$window.on('resize.YTplayer' + self.ID, function() { self.resize(self); });
Add this:
$('body').on('click','.'+self.options.pauseButtonClass,function(){ self.player.pauseVideo(); $('.'+self.options.pauseButtonClass).hide() $('.'+self.options.playButtonClass).show(); }); $('body').on('click','.'+self.options.playButtonClass,function(){ self.player.playVideo(); $('.'+self.options.playButtonClass).hide(); $('.'+self.options.pauseButtonClass).show(); });
It will let you play/pause. Thanks!