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:

Parent:

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

Child:

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

function stop()
{
hypeDocument.getElementById('testvideo').pause();
}

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 …

2 Likes

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

My Christmas Cactus… blooming early this year
DSC_9568_XmasCactus-sm

2 Likes

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', '*');

4 Likes

Thank you Mark!

1 Like