I'm assuming an onclick event counts as interacting with the document, so not sure why an autoplay error is being thrown
Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.
const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
playbtn.style.display = "none";
vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
playbtn.style.display = "none";
});
i {
position: absolute;
color: white;
}
.fa-play-circle {
display: block;
position: absolute;
left: 50%;
top: 50%;
font-size: 20rem;
-webkit-transform: translateX(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
color: white;
color: rgba(255,255,255,0.75);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="video-outer-full">
<div id="video-inner">
<i class="far fa-play-circle" id="playbtn"></i>
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
I was missing allow="autoplay" in iframe's attributes
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With