This page explains step by step how to embed the Ambilighplayer on your own website.

Intro

In its simplest form, this is how embedding the Amblightplayer works:

The script will write an iframe in the placeholder which holds the Ambilightplayer markup and code. All the assets are loaded from the www.ambilightplayer.philips.com domain.

You can download our example files as a reference. (note: the files need to run on a webserver in order to work)

Add a placeholder in your HTML file

Add a placeholder in your HTML file. You will need the ID of the placeholder later when you add the javascript.

<div id="ambilightplayer"></div>

Include the Ambilightplayer script

Add a script-tag to your page that refers to the javascript file on the www.ambilightplayer.philips.com domain.

<script src="https://secure.philips.com/campaign/ambilightplayer//content/js/distr/ambilight.api.2.0.0.js"></script>

Initiate the creation

Add the following code to your HTML.

<script type="text/javascript">
    window.onload = function(){
        var al_player = new AmbilightPlayer({
            id: 'ambilightplayer',
            domain: 'https://secure.philips.com/campaign/ambilightplayer/',
            width: '100%',
            height: '100%'
        });
    }
</script>

You're done

You can customise the Ambilightplayer using the options in the final step. More info about the options can be found on the documentation page.