Embedding Basics

1. Click the blue "Embed" button. 

2. There are two types of embed code you can use. Select one.

3. Copy the embed code and paste it into your web site, CMS or LMS.

Native Player has three advantages.

  1. It uses the native player chrome. In plain English, it will have the same play button, volume, timeline, etc... as the source video.
  2. If the original video source for your HapYak project was a JavaScript embed code, it will provide you with a JavaScript embed code here as well. This is important in some cases where the place you're embedding the video requires a JavaScript embed code.
  3. It maintains all the elements or functionality from your source video (such as social buttons, for example).

HapYak Player has three advantages.

  1. It uses the HapYak player chrome. Note that this chrome can always be styled using CSS to customize the look.  
  2. It ensures full screen support. Use HapYak player embeds if full screen support is important to you.  The reason is most native player full screen buttons launch full screen video on a way that strips away any HTML5 overlays.  These include closed captions and of course, any annotations you've added with HapYak.
  3. It's an <iframe> embed. This is important in some cases where the place you're embedding the video requires an iframe.

Embedding Options - Native Player

Dimensions: You can manually type in the dimensions for the video or select from a list of preset sizes.  The lock icon is selected by default. This ensures the aspect ratio is locked.

DOM element is an advanced configuration option. Normally you'll not want to change this.  Email us if you have questions about the DOM element.

You can use HapYak controls for native player the embed. You'll want to do this if you want to maintain elements or functionality from your source video embed code but you want to ensure that HapYak annotations will be visible when the viewer clicks the full screen button.

You'll want to check IE 7/8 documentMode if the page you're embedding the video on forces IE9 into "Quirks" mode, which HapYak annotations will not operate in.

Make sure to click Apply to lock in your changes.

Embedding Options - HapYak Player

The Control bar height is automatically set for you.  Normally, you'll only want to adjust this if the control bar looks to short or tall.

Check Embedding in HTTPS page if you are embedding it in an HTTPS page. (That's probably the most straightforward advice you'll receive all day).

You can use Native player controls for the HapYak player embed.  You'll want to do this if you don't want the native player chrome, but you want to embed the video in an iframe. 

Make sure to click Apply to lock in your changes.

Full Screen Support

You'll want to select the HapYak player if you want to ensure the annotations appear when the viewer clicks he full screen button.

There are a few cases in which full screen are not supported.

We use the Full Screen API to ensure that the video is loaded in full screen but maintains the HTML5 layer with all the annotations. Full Screen API is supported on a broad spectrum of browsers but not for example on Safari iOS.  We have developed a solution for full screen on Safari iOS though. The only difference is the video will load full screen in a new browser tab, rather than the same browser tab.

Did this answer your question?