Embedding Best Practices

Bits on the Run provides various methods for embedding videos onto your site. Each method has its limitations and advantages. This guide walks through these methods, highlighting their differences.

Embed Methods

Whenever you embed a video from the Bits on the Run dashboard, you can choose between three embedding methods using a dropdown:

Here's a quick overview of the differences between the embedding methods. In below sections, we'll jump into the details.

Embed method	Device support	Javascript API	AJAX loading
Javascript embed	yes	yes	-
iFrame embed	yes	-	yes
Embed tag	-	-	yes

Overall, why use an Embed or iFrame over a JavaScript if you don't use AJAX? This always boils down to CMS support. Some CMS or Blog systems do not allow inserting a <script> tag, but all of them allow inserting an <embed> tag. If your CMS only supports <embed>, you can use that method for now, but you should push your tech team to allow <script> tags instead.

Device Support

Both our Javascript and iFrame embeds have support for mobile devices (phones and tablets). This is achieved by supporting three different mechanisms for rendering the video:

1. Flash is the first option our players try. This works across desktops (99% of users have the required Flash Player 10.0 installed).
2. HTML5 is the second video render option. This is how video gets rendered on iPad/iPhone and Android.
3. Download is the last resort. This basically is a fancy link to an MP4 encode of the video. Every device that can load a webpage and play an MP4 (e.g. BlackBerry, Nokia) can play these videos.

Our Embed tag embeds only support Flash, which means these restrict playback to desktops only.

Javascript API

Our JavaScript embeds include support for the JW Player JavaScript API. This is an extensive API for controlling the player or reading player events on your web page. On the JW Player support site, you can find the API reference and various examples.

In addition to the JW Player API, JavaScript embed players support:

• An API call to set or override player options
• A class name botrplayer on the main player <div>, which you can use to position the player with CSS.
• An API call to load other videos into the player:
  botr_VIDEOKEY_PLAYERKEY.loadVideo('OTHERKEY');

Note we currently do not support any javascript interaction in HTML5 mode (iOs, Android). This will arrive at a later stage.

AJAX Loading

Our iFrame embed and Embed Tag methods have the ability to get inserted after the page loads. This is useful if e.g. you do not want to load a player on page load, but rather in response to a certain user action. Here is a quick example that embeds an iFrame player when clicking a link:

<div id="container"></div>
<a href="#" onclick="return embed();">embed a player</a>

<script type="text/javascript">
    function embed(){
        var frame = document.createElement('iframe');
        frame.setAttribute('src',
            'http://content.bitsontherun.com/players/nPripu9l-SG2qSEyu.html');
        frame.setAttribute('width','480');
        frame.setAttribute('height','270');
        document.getElementById('container').appendChild(frame);
        return false;
    };
</script>

Our JavaScript embeds do not support this functionality due to timing issues (loading external scripts) and compatibility with outdated or incomplete HTML.

Use your Own Player

Finally, if none of these three player embed methods satisfy your needs (or if you don't like JW Player in general ;), you can opt to host your own video player. Instead of publishing a full video, you can then pick and publish an individual encode of your video, from the Transcodes section on each video's details page:

Next, load this URL into your self-hosted player or HTML5 page. Note we also provide links to the poster image of the video.

When using your own player, you will loose the dashboard's point&click player designing, as well as the analytics, streaming and security options that are built into Bits on the Run hosted players!