How do I get a page with an embedded Vimeo video to unload the video and redirect to another page once the video has finished playing?

I figured out the redirect portion (I think... see below), but the problem is that when I go back to the page with the embedded video it instantly transports me to the redirect page. So I figure that if I can get the video to unload or reset to the beginning of the video before the redirect happens, then I'd clear up this issue.

Thoughts?

<div class="video"><iframe src="https://player.vimeo.com/video/253989945?byline=false&playsinline=0&portrait=false&title=false" frameborder="0" allow="autoplay; fullscreen" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.getEnded().then(function(ended) {
  // `ended` indicates whether the video has ended
   window.location.replace("http://www.google.com/");
});
</script>

Solution

You shouldn't be using a getter when you should be using an event listener. Also, you weren't using a conditional to see if the video had ended.

Something like this should serve this purpose:

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('ended', function() {
    console.log('ended')
    window.location.replace("https://www.google.com/");
})