Using Custom CSS via HapYak Plugin

In this topic you will learn how to configure custom fields to allow for custom CSS on a per video level when using the HapYak plugin.
  1. Login to Video Cloud Studio.
  2. In the Players module, configure a player with the HapYak plugin. For information on how to do this, see Configuring a Brightcove Player with the HapYak Plugin.
  3. Open the Admin module and then Video Fields. Note that you must be an account administrator to access to the Admin menu.
  4. Create a new custom metadata field with an Internal Name of custom_css (syntax important!). The Display Name can be anything you would like. We recommend HapYak Custom CSS. For information on creating custom metadata fields, see Creating Custom Metadata Fields.
  5. Open the Media module.
  6. Select the video associated with the Brightcove Interactivity project with project level CSS.
  7. Edit the video properties and locate the Custom fields section.
  8. Edit the HapYak custom field to add the link to the project level CSS. Please remember to remove the protocols.
  9. Save the changes.
  10. Publish the video and select the player that you configured with the HapYak plugin.
  11. Preview the video. The video should now have the custom CSS for that project. Note that caching may cause a delay in any changes to CSS.