Skip to main content

Our website has different domain/subdomain for different parts. Would Miniplayer work?

recommendation

If your website consists of multiple subdomains that you control, miniplayer could work under certain circumstances, however, with limitations. Therefore, we do not recommend below approach. Instead, we suggest disabling the Miniplayer to avoid these cross-origin issues.

Example Scenario - Cross-Origin Frame Access Error​

Let's say your website consists of:

  • www.brand.com - where you embedded the player
  • shop.brand.com - where your product pages are linked from

What would happen​

  1. The player is opened under the www.brand.com domain (e.g., www.brand.com/live).
  2. An iframe is automatically created, which has the same URL as the current page (www.brand.com/live).
  3. When a viewer clicks on a product, the player minimizes and tries to open the product URL (hosted under shop.brand.com) in the iframe.
  4. Since the origin of the iframe parent is www.brand.com, but the page rendered in it is from a cross-origin URL (shop.brand.com), the browser may refuse to render that page in the iframe.
  5. An error message appears inside the iframe.
  6. The same issue occurs for all navigations to cross-origin domains within the iframe.

Problem​

In the above example, the issue could arise because your server responses include a security header that prevents your website from being rendered in iframes with cross-origin parents. For example:

  • X-Frame-Options: SAMEORIGIN
  • Content-Security-Policy: frame-ancestors 'self';

Workaround​

To address this, you need to whitelist the origin of the iframe parent (www.brand.com or wherever the player is embedded) by updating the server response headers of the pages hosted on other domains (e.g., shop.brand.com) as follows:

  • Content-Security-Policy: frame-ancestors 'self' www.brand.com;

Workaround Limitation​

Note that the address bar will not change when a user navigates to a different domain/subdomain due to web constraints.