Creating Logo Overlays
In the video industry, a logo overlay is commonly referred to as a digital on-screen graphic (DOG), bug, or watermark. When a viewer clicks the logo overlay, a new browser window at the URL specified when you configure the logo overlay. You can use the Media module to set a logo overlay for any of your videos. You can also use the Brightcove Studio to set a default logo overlay to use for all of the videos in your account.
A logo overlay travels with and serves to brand the video. If your video is virally distributed, the logo overlay is distributed with it and provides another way for viewers to find their way back to your site.
Check out some ideas, tips, and examples about how to use logo overlays to promote your brand.
Creating a logo overlay image file
The image file you use for your logo overlay must be a GIF or PNG format image file, not larger than 300kb. For best results, use these styles:
- Logo overlay color: white @ 25% opacity
- Drop shadow: black @ 35% opacity
These styles emulate the watermark logo overlays seen on major television channels and allow the logo overlay to be seen on most background colors. You can download a PSD template for a logo overlay.
Logo overlay dimensions
The recommended size for a logo overlay is no more than 25% of the height or width of the playback window. For a 480x360 playback window, 25% of the width is 120px and 25% of the height is 90px). If you select a mostly transparent image, a viewer will be able to click anywhere in the area of the logo overlay to open the specified link in a new browser window. An image of this size works best with the logo alignment options.
The maximum size for a logo overlay is 464x344 (which is the size of the playback window minus an 8px border on each side). If you select a graphic of this size, you will need to place it within the 464x344 space on your own; you will not be able to position it using the logo alignment options in the Media module edit video settings dialog.
Some Brightcove players can be resized at run time or are by default smaller then the standard 480x360 pixels. If the player is set to a different size, the logo overlay will scale proportionately. For example, if the player is resized down to 50%, a 120x90px logo overlay would display at 60x45px. Therefore, you should select images for logo overlays that can be scaled down; logo overlays are never scaled above 100%.
Setting a logo overlay for a video in the Media module
You can set a logo overlay for an individual video using the Media module. For information about how to do this, see Editing Videos with the Media Module. Logo overlays can also be set at the account level using the Brightcove Studio's Account Settings page. If you have a logo overlay set at the account level and also set a logo overlay for a video, the logo overlay set for the video will display and the account level logo overlay will not display.
Setting a logo overlay at the account level
You can set a default logo overlay for your account in the Brightcove Studio's Account Settings page. This logo overlay will display for any video in your account, unless a different logo overlay is set specifically for that video.
To set a default logo overlay for your account:
- Sign in to the Brightcove Studio.
- On the Studio Home page, click Account Settings. You have Administrator privileges to access this area of the Studio.
- On the Account Settings page, click Publishing Settings and under Logo Overlay, click Edit.
- Click Add Image to upload a new GIF or PNG image file to use as your account's default logo overlay. Make sure you follow the logo overlay guidelines when you create this image file. If you already have a logo overlay image file uploaded to your account, you can select it from the image files presented. Otherwise, you can navigate through your file system, select the image file you want to use for a logo overlay, and click Select.
- Under Logo Link URL, you can enter a URL to which viewers will be sent if they click on your logo overlay. This is optional.
- Under Logo Tooltip, you can enter a text to be displayed when the viewer's mouse hovers over the logo overlay.
- Under Logo Alignment, you can specify where the logo overlay is positioned in the player. Select one of: bottom right (the default), bottom left, top right, or top left.
- Click Save Changes when you are done.