WordPress and Vimeo end of movie

On a WordPress homepage, I have embed a Vimeo video, when the video ends, it needs to go to portfolio page.

I found many examples of Vimeo API and about Froogaloop, like https://developer.vimeo.com/player/js-api, but I tried and no one worked. I also found that for WordPress the jQuery has to be a bit different, so I used the code that should be working in WordPress. I use Avada as a theme and I have a CODE BOX in the page construction where I have entered this code:

Read More
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<div class='fullscreen_block fw_background bg_video'>
    <iframe id="vimeovideo" style='left: 0% !important; top: 0% !important;' src="http://player.vimeo.com/video/158002922?autoplay=1&loop=0&api=1&showinfo=0&controls=0&color=ff4600&title=0&byline=0&portrait=0&player_id=vimeovideo'" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>


<script>

jQuery(document).ready(function ($) {

var iframe = $('#vimeovideo')[0],
    player = $f(iframe);

player.addEvent('ready', function() {
    player.addEvent('finish', onFinish);
});

  function onFinish(id) {
   window.location.href = 'http://xxxHEREISMYWEBSITExxx.com/portfolio/';
} 

});
</script>

The video plays fine, and at the end it does nothing. Why the redirect is not working? If do INSPECT, the console shows me the error:

froogaloop2.min.js:1 Uncaught TypeError: Cannot read property ‘ready’
of undefined

I looked up for that and there is a modified version of frogaloop that does not gives this error. Tried that one too, no success.

Can someone help me further? There is no more information on the net.

There are other websites that have this working with WP, tried to copy their JS code but its the same.

Related posts

Leave a Reply