Пуск/пауза видео в youtube

[Cheshirka1]

Создала отдельную кнопку для управлением видео. При нажатии кнопки видео должно останавливаться и меняться значок на кнопке, при повторном нажатии продолжение видео с того же момента и снова смена значка. В моем варианте работает только 1 часть. Подскажите пожалуйста, что нужно исправить, чтобы корректно заработало.

div id="play">
 
 <iframe width="500" height="426" id="Video5" class="background-video-my"
 
     src="https://www.youtube.com/embed/JHz3pPoHDl4?rel=0&amp;showinfo=0&amp;controls=2&amp;start=2&amp;autoplay=1&amp;modestbranding=1&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
 
    </div>
 
    <script src="//www.youtube.com/player_api"></script>
 
    <script type="text/javascript">
 
        function onYouTubePlayerAPIReady() {
 
        player = new YT.Player('Video5', {
 
        events: { 
 
                 'onReady': vidplay}
 
        });
 
        }
 
             
 
    function vidplay() {
 
       var video = document.getElementById("Video5");
 
       var button = document.getElementById("play");
 
        
 
       if ( $("#play").hasClass("play")) {
 
              button.addEventListener("click", function() {player.playVideo();});
 
              button.addEventListener("click", function() {
 
              button.className += " pause";
 
              jQuery(button).removeClass('play');});
 
       } else {
 
               button.addEventListener("click", function() {player.pauseVideo();});
 
               button.addEventListener("click", function() {
 
                   button.className += " play";
 
                   jQuery(button).removeClass('pause');});
 
       }
 
    }
 
</script>