How can I embed THEOplayer in an iframe?

Embedding a player in an iframe can be interesting to facilitate social sharing, or to decouple the player service from the rest of the website. THEOplayer allows you to embed your player in external websites.

There are two important things to take into account:

  1. Allowing the license to be used on external domains.
  2. Enabling fullscreen.

Allowing embedding of the license

Embedding is disabled by default in order to disallow external sites from using your license and impressions. You can however easily activate embedding by changing the THEOplayer configuration. In order to do this, you should set the isEmbeddable-flag to true. Do remind to set the configuration parameters before you load the player code.

<script>
    var theoplayer = window.theoplayer || (window.theoplayer = {});
theoplayer.configuration = theoplayer.configuration || (theoplayer.configuration = {});

theoplayer.configuration.isEmbeddable = true; </script>

Enabling fullscreen for players in an iframe

When embedding a player, it is important to know about the restrictions an iframe brings. One such restriction is the restriction on the content of the iframe going fullscreen. This can however be enabled using the allowfullscreen-attribute.

<iframe
src="player.html"
title="Embedded THEOplayer"
frameborder="0"
scrolling="no"
width="100%"
height="100%"
allowfullscreen="">
</iframe>

Enabling fullscreen for THEOplayer 2.X

Using an iframe in THEOplayer 2.X is very simple. You only need to set the isEmbeddable property of the player configuration to true. More information can be found at Player API documentation.