Custom play youtube video function.html

<!-- Html structure -->
<div class="video-wrap">
  <iframe class="embed-player" width="100%" height="100%" src="https://www.youtube.com/embed/mQWxbjjn0gw?enablejsapi=1&controls=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=0" frameborder="0" allowfullscreen></iframe>
</div>





<script type="text/javascript">
    // Youtube video player function
    var videoWrap = $(".video-wrap"),
        iframes = videoWrap.find('.embed-player');

    // POST commands to YouTube or Vimeo API
    function postMessageToPlayer(player, command){
      if (player == null || command == null) return;
      player.contentWindow.postMessage(JSON.stringify(command), "*");
    }

    // When the slide is changing
    function playPauseVideo(wrapper, control){
      var player;

      player = wrapper.find("iframe").get(0);
      //startTime = currentSlide.data("video-start");

        switch (control) {
          case "play":
            postMessageToPlayer(player, {
              "event": "command",
              "func": "mute"
            });
            postMessageToPlayer(player, {
              "event": "command",
              "func": "playVideo"
            });
            break;
          case "pause":
            postMessageToPlayer(player, {
              "event": "command",
              "func": "pauseVideo"
            });
            break;
        }

    }

    // Resize player
    function resizePlayer(iframes, ratio) {
      if (!iframes[0]) return;
      var win = $(".video-wrap"),
          width = win.width(),
          playerWidth,
          height = win.height(),
          playerHeight,
          ratio = ratio || 16/9;

      iframes.each(function(){
        var current = $(this);
        if (width / ratio < height) {
          playerWidth = Math.ceil(height * ratio);
          current.width(playerWidth).height(height).css({
            left: (width - playerWidth) / 2,
             top: 0
            });
        } else {
          playerHeight = Math.ceil(width / ratio);
          current.width(width).height(playerHeight).css({
            left: 0,
            top: (height - playerHeight) / 2
          });
        }
      });
    }
  
   
  $(".play-btn").click(function (e) {
      e.preventDefault();
      playPauseVideo(wrappper, "play");
      //$(".video-pause").show();
  });
  
  
  $(".paus-btn").click(function (e) {
      e.preventDefault();
      playPauseVideo(wrappper, "pause");
      //$(".video-pause").show();
  });
  
  
  
</script>