Control video in iframe via postmessage


#1

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:


#2

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();
}

(Hans-Gerd Claßen) #3

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 …


#4

What would be the best choice? Thanks!


(Hans-Gerd Claßen) #5

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 …


#6

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

My Christmas Cactus… blooming early this year
DSC_9568_XmasCactus-sm


#7

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


(Mark Hunte) #8

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


#9

Thank you Mark!