Applying Project Level CSS Via the HapYak Plugin

In this topic you will learn how to change project level styling using the HapYak plugin.

Creating a HapYak-enabled Brightcove Player

  1. Create a new Brightcove Player or edit an existing player.
  2. Configure the player with the HapYak plugin.
  3. To publish the player, click Publish & Embed and then Publish Changes.

Creating a Video Cloud custom field

A custom field will be used to hold the location of the CSS file used to style the Brightcove Interactivity project. To create a Video Cloud custom field, follow these steps.

  1. Login to Video Cloud Studio.
  2. Open the Admin module and then Video Fields. Note that you must be an account administrator to access to the Admin menu.
  3. Click Add Field.
  4. Enter a Display Name of Custom CSS. An Internal Name of custom_css will automatically be generated.
  5. Select a Type of Text for the field.
  6. Enter a Description. The description field will appear as a hint in the Studio interface.
  7. If the custom field will be required, check Make this Field Required.
  8. Click Save Field to save the changes.
    Adding a field

Specifying the CSS file location and creating a Brightcove Interactivity project

To specify the location of the project-level CSS file and create a Brightcove Interactivity project, follow these steps.

  1. Open the Media module.
  2. Select a video to publish by checking the box next to the video thumbnail.
  3. Click on a video name to open the video properties.
  4. Locate the Custom fields section and click Edit.
  5. Enter the URL to your custom CSS file.
  6. Click Save to save the changes.
  7. At the top of the page, click Publish and embed... ˇ > Publish to web.
  8. Select the player with the HapYak plugin.
  9. Click the preview link to open a preview in a new browser tab.
  10. Play the preview video (the video only needs to be played for a few seconds). This will auto-create a project in Brightcove Interactivity.

Verifying the styling changes

To verify that the styling changes are working, follow these steps.

  1. Login to Brightcove Interactivity Studio (https://www.hapyak.com/login).
  2. In the left navigation, click Manage.
  3. A list of projects will appear. Confirm the video you just published appears in the project list.
  4. Click on the project to open it.
  5. Add interactions as appropriate.
  6. In the Video Cloud Media module, preview the video and confirm that the interactions and styling changes appear.