IFrame Annotation

How to create any custom annotation or interaction using HapYak's flexible and extensible iframe annotation.

Written by Michael McGrath Updated over a week ago

Friendly Warning: welcome to developer territory.

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time.

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and JavaScript courses.

The Power of the IFrame Annotation

The iframe annotation lets you create custom annotations using HTML / CSS and JavaScript. It is often used to add forms from CRMs or LMSs, to create add-to-cart functionality directly within the video, or to have more advanced interactions appear on top of the video.

Pause and Play with IFrame Annotations

Iframe annotations can be set to pause the video when it appears on-screen (just like any other annotation), but often these annotations have calls-to-action, submit buttons or similar actions. You can configure the annotation so that when a viewer clicks the button, the video will resume playing. Refer to the API documentation for details.

Note: If you set Gate: Y on an iframe make sure to set Pause: N.

Scaling IFrame Annotations

The iframe annotation overlays the video. Because videos come in many different sizes, we assume a default size and allow you to scale the iframe to fit your desired embed size. The assumed width of the iframe is 1200 pixels. So if your embedded HapYak video is set to 1200 pixels wide, your iframe annotation will look perfectly scaled. But if the embedded video is set to 960 pixels wide for example, the iframe annotation will be scaled down.

You can adjust this scaling manually for any size video embed. For help scaling your iframe annotation feel free to email the desired embed size and HapYak project number to support@hapyak.com.

Testing IFrame Annotations

Always test IFrames in the Landing Page. In the editor you will most often see a grey placeholder box.

Since each annotation created with the Iframe annotation is by definition custom, HapYak does not certify user-created Iframes in our supported environments. You should test your final iframe annotations in these environments yourself. If you are working on a client project, or would like assistance with this process, HapYak Professional Services can be separately contracted to assist.