单击叠加图像以启动视频后，阻止页面移至顶部

Question

我有一些代码可以在点击叠加图像后自动启动视频。麻烦的是，点击后，整个页面向上移动到顶部，而视频在页面下方播放。原因是什么？如何防止这种情况发生并允许视频在最初点击的位置播放？

这是一个指向codepen的链接（向下滚动以查看视频）：https://codepen.io/NewbCake/pen/qMMQZo

这取决于Jquery和Fitvids

感谢您的任何帮助！

<section>
  <div class="video-intro">
    <div class="image">
      <div class="play-button btn"></div>
      <a href="#" id="btn_play" class="btn">
        <img src="http://placekitten.com/960/540" alt="play video" />    
      </a>
    </div>
    <iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=57c0d4" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</section>

CSS

section {
  display:grid;
  grid-template-columns:10vw 500px;
  margin-top:300px;
}

/* video intro */
.video-intro {
  grid-column: 2 ;
  box-shadow:0px 0px 7px #ddd;
  margin:0 auto 50px !important;
  width:90%;
  position:relative;
  max-width:960px;

.image {
  position:absolute;
  top:0;
  left:0;
  z-index:20;

img {
  width:100%;
  height:auto;
}

JS

$(function(){
  var $parent = $('.video-intro'),
  $f = $parent.find('iframe'),
  $image = $parent.find('.image'),
  f = $f[0],
  url = $f.attr('src').split('?')[0];

  window.addEventListener('message', function(e){
    var d = JSON.parse(e.data);
  }, false);

  $('.btn').click(function(){
    var $t = $(this);
    runCommand('play');
    $image.hide();
  });

  function runCommand(cmd){
    var data = {method : cmd};
    f.contentWindow.postMessage(JSON.stringify(data), url);
  }

  // fitvids
  $('.video-intro').fitVids();

});