Supports postMessage

Hi, there! Yes,It does!!

We are currently in the process of creating a documentation page, but for the time being, let’s share these examples:

window.postMessage( {
  event: 'videopress_action_play'
} )

window.postMessage( {
  event: 'videopress_action_pause'
} )

window.postMessage( {
  event: 'videopress_action_set_currenttime',
  currentTime: 30 // timestamp in seconds
} )

window.postMessage( {
  event: 'videopress_action_set_volume',
  volume: 0.4 // 40%
} )

Thank you @retrofox !

I am getting errors in the console when using the code above. I am trying to play the VideoPress video when it enters viewport, so I am using GSAP for that.

Please find my code below:

gsap.registerPlugin(ScrollTrigger);

const playVideoPressIframe = (iframeE) => {
  iframeE.window.postMessage( { event: 'videopress_action_play'} );
}

const stopVideoPressIframe = (iframeE) => {
  iframeE.window.postMessage( {  event: 'videopress_action_pause'} );
}

let videoPressVideoAnimationPanels = gsap.utils.toArray(".videoPress-animation");

videoPressVideoAnimationPanels.forEach((videoPressVideoAnimationPanel, i) => {

  let iframeElem = videoPressVideoAnimationPanel.querySelector('iframe');
  //let iframeElemSrc = iframeElem.src;


   ScrollTrigger.create({
     trigger: videoPressVideoAnimationPanel,
     start: 'top-=80vh center',
     end: 'bottom center',
     markers: true,
     onEnter: () => playVideoPressIframe(iframeElem),
     onEnterBack: () => playVideoPressIframe(iframeElem),
     onLeave: () => stopVideoPressIframe(iframeElem),
     onLeaveBack: () => stopVideoPressIframe(iframeElem)
   });
});

When it enters, it calls the playVideoPressIframe() function and executes the code inside. In the play function, I have this line of code to start the video:

iframeE.window.postMessage( { event: 'videopress_action_play'} );

It’s not working and I’m getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘postMessage’)

What is the issue?

Thanks!

What’s the issue?

Try defining the targetOrigin. Also, be sure you are picking properly the c contentWindow object of the iFrame.

Try the following:

iframeE.contentWindow.postMessage( { event: 'videopress_action_play' }, { targetOrigin: '*' } );

Hello @rose18

It’s been one week since this topic was last updated. I’m going to mark this thread as solved for now. If you have any further questions or need more help, you’re welcome to open another thread here. Cheers!