Sharing and Embedding

Sharing a HapYak Landing Page. Embedding a HapYak Project. HapYak Player v. Native Player. Player options.

Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

Projects can be shared with viewers by either sharing a link to a landing page or by embedding the project in any external system (CMS, LMS, Website, etc...)

Note that if you are using the HapYak plugin for Brightcove, Wordpress or another system integration, all sharing / embedding / publishing will happen via that third-party system.

For everyone else, start by clicking the big blue Share button.

Sharing a Landing Page

This is a dedicated static URL that any viewer can access. To generate one, click Landing Page, then the embed code will appear on the panel.  

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.

If you would like to customize the landing page (by adding a header, footer or social share icons for example), click Edit. This will open a new window for the Experience for that video. Then click Settings.

Embedding a HapYak Project

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

First, click Share, then select HapYak Player or Native Player (Brightcove Player, Wistia Player, Vimeo Player, etc...) 

HapYak Player v. Native Player

HapYak Player is most commonly used player option. If you want your viewers to be able to watch the interactive video in full screen or if 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 code 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 they launch 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.

Options

Size

We recommend the Responsive setting. This ensures that the embed will adapt to the height and width of the the parent element in which the video is embedded - the optimal viewing experience across all devices.

Or select Fixed Size and enter specific dimensions. The lock icon locks the aspect ratio when you manually adjust the dimensions. A Fixed Size embed will always remain the same size and may only be partially viewable on some devices or in smaller browser windows.

Controls

There are two options - HapYak Controls or Native Controls.

Under Use Videojs4 Controls in the Controls panel, selecting No will enable use of the HapYak controls, and selecting Yes will activate the Native Controls. 

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

An important benefit of HapYak controls is that unlike many player controls, they are persistent and below the video (rather than appearing on the video when the viewer hovers over with the mouse). This ensures that they do not get in the way of any viewer interaction.

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

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 your video from the video source. Then you can simply replace the video source of the HapYak project.   For help with your specific video player, email us at support@hapyak.com.

DOM Element (Native Player/VideoJS4 Player Only)

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

Embed.ly Link

Embed.ly is a service that lets hundreds of systems and platforms (like Jive, Medium, reddit, Disqus, AOL, Digitas, Acquia, Trello, Udemy, etc...) make it easier for people to embed content (like interactive videos).

HapYak is an embed.ly provider. What this means is if your system supports embed.ly than all you have to do is copy and paste the embed.ly link and it will figure out the rest and embed your HapYak project for you.

SCORM

Please refer to this article.

Did this answer your question?