I have an Apple podcast embed on my page wherein I need to add some code for analytics tagging based on clicks on play and pause buttons. I have achieved this for Spotify embed using their iFrame API however Apple podcasts don't seem to have one.

As a workaround, I am trying to find a way to access the play and pause buttons inside the iFrame and trigger a click event and add the code. Because of the cross-domain policy, the following code doesn't return anything -

this.iframeAppleWidget = this.$el.find('iframe');
console.log(this.iframeAppleWidget[0].contentWindow.document); // Empty

My HTML code looks like this -

<iframe class="apple-podcast-small" title="Test Podcast" style="margin: 0 auto; display: block;" src="https://embed.podcasts.apple.com/us/podcast/how-to-learn-web-development-skills/id1412209136?i=1000554938051&amp;itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto" width="80%" height="166" frameborder="no" scrolling="no"></iframe>

I'm trying to add a click event listener to a button element inside the #document (iFrame DOM) and add some code.

After doing a lot of research, I found Window.postMessage() as a suggested solution however I'm unsure of whether it can help as I'm not trying to send any message from one window to another.

Could you please point me in the right direction?