Add an overlay image on the player

You might be looking for a way to personalize the user experience by adding a skin over the Nimbb Player. This can be done easily using the overlay feature, which allows you to add an image that includes transparency. Using this feature, you can add creative visual effects like borders. This example shows an overlay image added to Nimbb.

This example requires you to specify your developer key (see tutorial).
A Gold or higher subscription is required.

Example

HTML code

<object id="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="https://player.nimbb.com/nimbb.swf?mode=record&overlayurl=www.nimbb.com/Resources/Images/Overlay/xmas.png&key=XXXXXXXXXX&lang=en" />
<param name="allowScriptAccess" value="always" />
<embed name="nimbb" src="https://player.nimbb.com/nimbb.swf?mode=record&overlayurl=www.nimbb.com/Resources/Images/Overlay/xmas.png&key=XXXXXXXXXX&lang=en" width="320" height="240" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>


In the example, we specify a URL to an overlay image with the parameter overlayurl. Take note that the image is automatically resized to the size of the Nimbb Player. Your image size must be 320x240 pixels. Your image can use transparency and opacity (using Alpha). PNG is a recommended image format. The overlay works on both View and Record modes.

If your image doesn't show up, make sure that you have an active Gold or higher subscription. Also, make sure to add your site URL in your Developer Settings.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.