防止页面在单击叠加图像以开始视频后移动到顶部

Question

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

这是代码笔的链接(向下滚动以查看视频(： https://codepen.io/NewbCake/pen/qMMQZo

这取决于Jquery和Fitvids

感谢您的任何帮助！

.HTML

<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();
});

Answer 1

尝试使用javascript:而不是#：

<a href="javascript:" id="btn_play" class="btn">