You Tube Player - YTPlayer - Play/Pause - NOT RESPONSIVE

HTML

<body>

<div id="escolta">play</div>
<div id="pausa">pausa</div>

    <iframe id="video" type="text/html" width="640" height="360" src="//www.youtube.com/embed/MDkOGIElm9M?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>



</body>

CSS

#escolta,#pausa{ font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
#escolta {position:absolute;top: 20px;left:20px;}
#pausa{position: absolute;top:20px;left: 150px;}
#pausa{position: absolute;top:20px;left: 150px;}

#video{position:absolute;top:100px;left:20px;}

JavaScript

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onReady': onPlayerReady
      }
    });
}
function onPlayerReady(event){
  event.target.playVideo();
    $("#escolta").on('click', function() {
      player.playVideo();
    });
    $("#pausa").on('click', function() {
      player.stopVideo();
    });
  }
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);