Control video in iframe via postmessage

Hi guys, again I’m stuck.

I have a parent document with a button and an HTML-widget. In this widget I open an HTML file exported from another Hype-document. I am now trying to pause a video inside an iframe using postmessage when clicking on the button in the parent window. Unfortunately I am not able to communicate with the stop-function in the child window… What am I doing wrong? Could you guys have a look, please?

Code in the parent window:

Code in the html widget:

Thank you guys, found it myself. Solution:


	hypeDocument.getElementById('video_container').childNodes[0].contentWindow.postMessage('message', '*');


window.addEventListener('message', stop, false);

function stop()

hypes html-element-output-structure is not necessarily the same for every device … so a hard coded childNodes[0] may not be the best choice …

What would be the best choice? Thanks!

i don’t remember exactly … but it’s been a different nesting of elements that broke such approaches.

I’d use a querySelector(‘iframe’) on the parentElement …


Thank You & Happy Holidays to You Hans - and to All on this Forum!

My Christmas Cactus… blooming early this year


Thanks Hans, thank you, sounds interesting…
would your share the piece of code you would use instead…?

hypeDocument.getElementById('video_container').querySelector('iframe').contentWindow.postMessage('message', '*');


Thank you Mark!

1 Like