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 for example to add forms from CRMs, LMSs, to create add-to-cart functionality directly within the video, or to have more advanced interactions appear on top of the video.

The IFrame Annotation API is here.

Pause and Play with IFrame Annotations

You can set an iframe annotation 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 buttons. You can configure the annotation so that when a viewer clicks the button the video will resume playing. Refer to the API for detail.

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

Scaling IFrame Annotations

The iframe annotation overlays the video.  Because video comes 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

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 the performance of them 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.

Did this answer your question?