I wrote an AngularJS directive for vimeo videos with built in play/pause functionality using their froogaloop library.
It's works great! The only issue is that I get the following error when the page first loads.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://player.vimeo.com') does not match the recipient window's origin
Am I initializing the froogaloop object wrong in the directive? Any suggestions would be most appreciated.
You can check it out the plunker here: http://plnkr.co/edit/GKWNk3LhX0MR3lhpfqyA
I recommend to execute the code in the onLoad
event from <iframe>
. Then you are ensured that the code will execute when iframe is ready for receiving messages.
There are plenty ways to do it:
$('iframe').load(callback)
or iframe_element.addEventListener('load', callback)
or iframe_element.onload = callback
. Where callback
is the method which uses Froogaloop.
But you have to know that some of those solutions might have some drawbacks on some old/MS browsers browsers.