Question

I’ve been trying to get the YouTube JS API’s stopVideo() method to work for some time now. Everyone says it’s as simple as calling it on the iframe element, but the only way I was able to get it to work was via a method called postMessage() which I found on someone else’s Stackoverflow post.

The code:

$('iframe').postMessage('{"event":"command","func":"stopVideo","args":""}', '*')

is what eventually got it working for me. But still, I don’t understand what I’m doing. Can anyone explain this to me?

Answer 1

From MDN postMessage

window.postMessage is a method for safely enabling cross-origin
communication. Normally, scripts on different pages are only allowed
to access each other if and only if the pages which executed them are
at locations with the same protocol (usually both http), port number
(80 being the default for http), and host (modulo document.domain
being set by both pages to the same value). window.postMessage
provides a controlled mechanism to circumvent this restriction in a
way which is secure when properly used.

So what it does is lets you get around the same origin policy and talk to other domains. Only issue, not all browsers support it.