COMMUNICATION BETWEEN IFRAME AND WEBSITE HOST

Overview

In order to enable communication between the parent website and the video-player widget (embedded within an iframe) while avoiding CORS issues, both must be hosted under the same domain. This allows seamless communication and unrestricted access from the parent website to the iframe's content. If the iframe and the video player are hosted on different domains, you should implement a server-side proxy. This proxy will handle requests to the cross-origin domain and serve the content back to the website host from the same origin, effectively making it appear as though the request is originating from the same domain. One popular tool for achieving this is NGINX.

Example: WebsiteDomain: https://domain-bets.com (opens in a new tab)

 <!-- add allowFullScreen flag -->
<iframe allowfullscreen id='video-iframe'
      src="https://domain-bets.com/video-integration">
</iframe>

Steps to accomplish this

Listen events from the video-player:

To listen for events from video player, implement the following steps:

• Obtain a reference to the iframe.
• Wait for the iframe to fully load.
• Access the iframe's window and listen for messages from the 'geniussportsmessagebus' event stream."

   const iframe = document.getElementById('video-iframe')
    iframe.addEventListener('load', () => {
      iframe.contentWindow.addEventListener('geniussportsmessagebus', handleEvents)
    })

Refer to this section to add an element on top of the video player