Trouble with setTimeout with addEventListener

Question

I have a vimeo video that I want to play 3 seconds after a button is clicked. I can get the video to play on click, but I can't seem to get the setTimeout in the right spot... any suggestions?

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", setTimeout(function(){player1.api("play")}, 3000));

I'm using the vimeo froogaloop API.

Answer 1

Just wrap it inside a function -

prelearnBtn.addEventListener("click", function(){
    setTimeout(function(){
        player1.api("play");
    }, 3000);
});

Answer 2

The setTimeout function takes in a callback function. Just wrap your code in an anonymous function, then it should work. Also, you might have cross-domain issues if you're attempting to access the contents of an iFrame.

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", function(){setTimeout(function(){player1.api("play")}, 3000)});