Je suppose qu'un événement onclick compte comme une interaction avec le document, donc je ne suis pas sûr de la raison pour laquelle une erreur de lecture automatique est lancée.
Uncaught (in promise) NotAllowedError : play() a échoué parce que l'utilisateur n'a pas interagi avec le document en premier.
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>