Ridz

<style>
.block {
  margin: 50px;
  height: 100px;
  width: 100px;
  background: #008000;
  position: relative;
  display: none;
}
.block::after  {
 content: '';
    position: absolute;
    left: 30px; top: -40px;
    border: 20px solid transparent;
    border-bottom: 20px solid green;
}
.toggle {
  padding: 20px;
  border: 1px solid #808080;
  display: inline-block;
  margin-left: 50px;
}
</style>
<div class="toggle">click me!</div>
<div class="block"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>$('.toggle').click(function(){
  $('.block').slideToggle().css("overflow","visible");
})
</script>

function onYouTubeIframeAPIReady(){

    $('.player').each(function(){
      var playerId = $(this).attr('id');
      var videoId = $(this).data('video');
      var player;
      var parent = $(this).parent();
      player = new YT.Player(playerId, {
        height: '360',
        width: '640',
        videoId: videoId,
        events: {
          'onReady': onPlayerReady.bind(parent),
          'onStateChange': onPlayerStateChange
        },
        playerVars: {
          showinfo:0,
          // iv_load_policy:3,
          rel:0
          // controls:0
        }
      });
    });

  }

  function onPlayerReady(event){
    var target = event.target;
    $('.play',this).click(function(){
      target.playVideo();
      $('body').addClass('v-play');
    })
    $('.pause', this).click(function(){
      target.pauseVideo();
      $('.v-play').removeClass('v-play');
    })
    //event.target.stopVideo();
  }

  function onPlayerStateChange(event){
    var status = event.target.getPlayerState();
    if(status == 0){
      $('.v-play').removeClass('v-play');
    }
  }