Communication iframe video player using event listener for fullscreen

Default behavior of fullscreen in iframe elements

The integration of the product by using iframe is performed in the following way

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

Among the parameters that the iframe receives is allowfullscreen, this gives the iframe a default behavior to enter or exit the fullscreen of the product. The default behavior has the limitation that the client cannot put own content on the fullscreen

Rendering custom elements on top of fullscreen iframe

Since some customers have needs to display content over BetVision when it is on fullscreen. Knowing that it is not possible in the fullscreen API at this moment, we provide an alternative solution to this problem, simulating the fullscreen behavior through a custom implementation.

Steps to custom implementation

Add the iframe, note that allowfullscreen should not be added.

We need to use a container to simulate the fullscreen easily

  <div id="container">
    <iframe id='video-iframe'
      src="https://domain-bets.com/video-integration">
    </iframe>
    <!-- Your custom element goes here -->
  </div>

Create an event listener in your integration for events occurring in the iframe.

This is a propose to send the message to the website parent

This must be added where the Web Browser Integration is implemented.

    window.addEventListener('geniussportsmessagebus', (event) => {
      const eventMapped = {
        type: event.detail.type,
        body: event.detail.body
      }
      window?.parent?.postMessage(eventMapped, WebsiteDomain)
    })

As you can see:

Use postMessage to communicate the events to the page in which the iframe is embedded (for the security of your site please add the corresponding targetOrigin domain).

In your website add an event listener to listen to the toggleFullscreen messages.

The event that is emitted from our product when you click on fullscreen is toggleFullscreen, it is recommended to validate the origin of the event for security reasons.

    window.addEventListener('message', (event) => {
       if (event.origin === "iframe_domain") {
        if (event.data.type === 'toggleFullscreen') {
          ...
        }
        ...
       }
      ...
    })

Once you are capturing the toggleFullscreen event you can add your logic inside the conditional, in our proposal you can do it through the override styles on the iframe container, the intention is that within your page you control the fullscreen state and functions that allow you to enter or exit fullscreen and add your own content about our product.

You can find the complete example on the following page following the link to github in the section Using events approach (event listener)

Integration Betslip Inside Iframe

Web Browser Integration Preparing your integration