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=".7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src=".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="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

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./releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo./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./video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

• javascript
• vimeo

• 1 I think "the document" here refers to the document in the <iframe>, not the document containing your play button. – Harry Cutts Commented Feb 13, 2019 at 23:24
• Your code doesn't really make sense, are you trying to change the play button inside the player or your own custom button? The button outside the video player that you're creating yourself is almost useless. Your code works fine if you change all instance of player to vimeoPlayer as that is the variable you're initializing. Can you please explain in more detail what you're trying to do? – cb64 Commented Feb 13, 2019 at 23:46
• 4 @cb64 it's meant to be an overlay. The CSS here isn't perfect, but that's of little consequence. Whether my code "makes sense" to you or you "understand the purpose" is irrelevant to the question of why an autoplay error is being thrown when the document is clearly being interacted with – froggomad Commented Mar 19, 2019 at 19:47

2 Answers 2

I was missing allow="autoplay" in iframe's attributes

<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo./video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>

For me allow="autoplay" wasn't enough! I had to add muted=1 to the src attribute of the <iframe>:

<iframe
    width="853"
    height="480"
    allow="autoplay"
    src="https://player.vimeo./video/23190487&amp;muted=1&amp;autoplay=1"
</iframe>

If you're curious about why muting might be necessary, check out this related stackoverflow answer: https://stackoverflow./a/67370740/11715057