Product Updates | Contact Support | System Status
Page Contents

    Using the Built-In CSS Classes

    In this topic you will learn how to use and apply the built-in CSS classes that are available.

    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:

    1. Login to Brightcove Interactivity Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. Edit an annotation.
    5. Click More...
    6. 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

    Page last updated on 01 Aug 2022