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:

• add a placeholder to your HTML file.
• include the amblightplayer javascript file from the www.ambilightplayer.philips.com domain
• add javascript code to your webpage to initiate the embedding of the Ambilightplayer

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="http://acc.ambilightplayer.philips.com/content/js/distr/ambilight.api.2.0.0.js"></script>

Initiate the creation

Add the following code to your HTML.

• id: this is the ID of your placeholder div
• Add the domain from which this page is running
• Choose the width and height, use px or %

<script type="text/javascript">
    window.onload = function(){
        var al_player = new AmbilightPlayer({
            id: 'ambilightplayer',
            domain: 'http://acc.ambilightplayer.philips.com',
            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.