In the Interactivity Editor you have access to some CSS classes that are built in to the Brightcove Interactivity platform. The intention of these classes is to help solve issues commonly faced while authoring content. This topic will cover how to apply classes, followed by a breakdown of each class, what it does, and which annotations it is compatible with.
In addition to the classes described below, there are a number of others available to you that add simple animated transitions to your annotations. For more information, see Using Custom Transitions with Animate.css.
How to apply classes
To apply a custom class to an annotation, follow these steps:
Follow these steps to add a Custom Form (this topic uses a Google Form) widget to a project:
- Login to Brightcove Interactivity Studio (https://www.hapyak.com/login).
- In the left navigation, click Manage.
- Click on a project to open it.
- Edit an annotation.
- Click More...
- Click Add Class.
Add class names to the Classes field exactly as they appear in the list below. Multiple classes can be applied to a single annotation but must be separated by a space and should not be preceded by a period.
hapyak-annotation-full-frame
This class will modify the selected annotation to snap to fit the entire frame of your video.
Compatible annotation types:
- Transparent Overlay
- Image Overlay
- Chapter Menu
- Quiz
hapyak-annotation-bring-to-top
This class will make the selected annotation appear at the "top" layer on top of your interactive experience. This is useful if you want to make sure an element always appears to be "in front" or "on top" of another element.
Compatible annotations types:
- Text Overlay
- Transparent Overlay
- Image Overlay
- Quiz
- User Sentiment Widget
- Custom Form Widget
- Drawing Tool
hapyak-annotation-send-to-back
This class is the opposite of hapyak-annotation-bring-to-top. It will send your annotation to the back-most layer of your interactive experience. This is useful if you want to make sure a particular element always appears to be "behind" another element.
Compatible annotations types:
- Text Overlay
- Transparent Overlay
- Image Overlay
- Quiz
- User Sentiment Widget
- User Sign-in Widget
- Poll Widget
- Custom Form Widget
- Drawing Tool
hapyak-annotation-shine
This class will add a shimmer-effect to the selected annotation. The shimmer will sweep across the frame of the annotation on mouse-hover.
Compatible annotations types:
- Transparent Overlay
- User Sentiment Widget