You can share your project with viewers by either sharing a link to a landing page or by embedding the project in your Website, CMS or LMS.

Sharing a Landing Page

To Share a project via the landing page, click the “view landing page” link located on the left hand side above your project editor. 

This will create a public URL that you can copy and paste to share with viewers. This is a quick and easy way to share your project with others - for example to get feedback from collaborators or clients or more broadly in an email, on Slack, or any other channel.

You’ll notice a few buttons at the bottom that are only viewable to you because you’re logged in to HapYak. Your viewers will simply see a clean landing page.

Note you can change the size, controls and other options of the landing page by going back to the project and clicking “Embed”. Make your adjustments. Click apply. Then click again on “view landing page” This creates a brand new landing page with a new unique link.

The options are detailed below.

Embedding a HapYak Project

Embedding HapYak projects on your Website, CMS, or LMS is easy! 

First, click the Embed Button in the top right hand corner. Next select whether you want to embed your video using the HapYak Player or the Native Player. 

HapYak Player v. Native Player

HapYak player is most commonly used. If you want your viewers to be able to watch the interactive video in full screen or using an iframe embed code is necessary for embedding in your CMS, then HapYak player is your best bet.

Native player gives you a javascript embed that allows for advanced integration and communication with the video. If you are a developer using advanced embed techniques or on-page communication with javascript then Native player is your best bet.

Full Screen - why HapYak player is better

When most native player full screen buttons are clicked it launches full screen video in a manner that strips out any HTML overlay (including HapYak annotations).

The HapYak player includes a full screen button that launches full screen in the browser and retains the annotations.

You may notice the full screen video launching in a separate browser tab. This happens on the Safari browser (both on the iPad and on desktop). Other browsers (Chrome, Firefox, IE) will launch the video full-screen in the same browser tab.

Double Controls

If you use the HapYak player, you may see the native player controls in addition to the HapYak player controls.

If you wish to remove the native player controls, you will want to obtain a "chromeless" version of the your video from the original video source. Then you can simply replace the video source in the HapYak project on the "Configure" screen.   For help with your specific video player, email us at support@hapyak.com.

Options

Whether you are sharing the landing page or embedding you can set specific options for the player.

Dimensions

The size of your project. Select a preset size or manually enter dimensions. The lock icon locks the aspect ratio when you manually adjust the dimensions.

Responsive (HapYak Player Only)

If you click “Responsive” the embed will adapt to the height and width of the the parent element in which the video is embedded. This ensures optimal viewing experience across all devices.

If you don’t check responsive, the embed will always remain the same size and may only be partially viewable on some devices or in smaller browser windows.

Embedding in HTTPS page (HapYak Player Only)

Is you are embedding the video in an HTTPS page (also known as a secure web site), check this box.

HapYak Controls or Native Controls

On either HapYak player or Native player you can use HapYak controls or Native controls. This is a great feature.  

The modern and responsive HapYak controls include skip to annotation buttons that enhance the interactive experience for the viewer, and a full screen button that ensures full screen support for the interactive video.

It's important to note that unlike many player controls, the HapYak controls are persistent and below the video (rather than appearing on the video when the viewer hovers over with the mouse). 

We have an alternate On-Hover player style. You can test it out by copying this CSS URL...

//hapyak_demos.s3.amazonaws.com/css/overlay-controls.css

...and pasting it in to Configure / Custom Annotation CSS URL field in your project.

The native controls will simply show the controls from your video player itself (Wistia, Vimeo, Brightcove, YouTube, etc....)

Control Bar Height

Setting the height of the HapYak Control Bar is a rarely used advanced option. The two most common use cases are if you have added Custom Control CSS or if you want to hide the HapYak Controls completely (in which case simply set the height to 0).

DOM Element (Native Player Only)

Naming the DOM element is for advanced users. This allows you to apply a custom id to the video element.

Import Cue Points

If your video has cue points (or markers) added to it within your OVP (like Brightcove), check this box to import these cue points and use them as handy reference points for annotations.

Did this answer your question?