Responsive API

HapYak provides a responsive design wrapper for HapYak instances

To enable, include the following script after hapyak.js:

<script src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak.api.js"></script>

API methods

hapyak.responsive(target, container)

hapyak.responsive(target)

Supported target values: HapYak Viewer instance, HapYak IFRAME element, HapYak IFRAME DOM ID string

Supported container values: HTML element or DOM ID string

HapYak Viewer instance via Embed API

<div class="row">
  <div class="hidden-xs col-sm-4 col-lg-8">&nbsp;</div>
  <div class="col-xs-12 col-sm-8 col-lg-4">
      <div class="videoWrapper wideScreen">
          <div class="videoPadding">
              <div id="hapyak-player-{{ UUID }}"></div>
          </div>
      </div>
  </div>
</div>
hapyak.viewer({
  apiKey: HAPYAK_API_KEY,
  /* ... */
  onLoad: function (viewer) {
      hapyak.responsive(viewer);
  }
});

HapYak Viewer instance via Playlist API

<div class="row">
<div class="hidden-xs col-sm-4 col-lg-8">&nbsp;</div>
<div class="col-xs-12 col-sm-8 col-lg-4">
<div class="videoWrapper wideScreen">
<div id="wistia_{{ PLAYLIST_ID }}_responsive" class="videoPadding">
<div id="wistia_{{ PLAYLIST_ID }}" class="wistia_playlist"></div>
</div>
</div>
</div>
</div>
hapyak.playlist.embed('wistia', PLAYLIST_ID, function (playlist) {
  playlist.viewer({
      apiKey: HAPYAK_API_KEY,
      onLoad: function (viewer) {
          hapyak.responsive(viewer, 'wistia_' + PLAYLIST_ID + '_responsive');
      }
  });
});

HapYak IFRAME via Embed API

<div class="row">
  <div class="hidden-xs col-sm-4 col-lg-8">&nbsp;</div>
  <div class="col-xs-12 col-sm-8 col-lg-4">
      <div id="hapyak-embed-608" style="width:{{ WIDTH }}px;height:{{ HEIGHT }}px;"></div>
  </div>
</div>
instance = hapyak.player({
  apiKey: HAPYAK_API_KEY,
  elementId: 'hapyak-embed-' + PROJECT_ID,
  projectId: PROJECT_ID,
  onloadedmetadata: function () {
      hapyak.responsive(instance);
  }
});

HapYak IFRAME element

<div class="row">
  <div class="hidden-xs col-sm-4 col-lg-8">&nbsp;</div>
  <div class="col-xs-12 col-sm-8 col-lg-4">
      <iframe id="hapyak-iframe-608" class="hapyak-embed"
          marginwidth="0" marginheight="0" frameborder="no" scrolling="no"
          allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
          src="{{ HAPYAK_URL }}" width="{{ WIDTH }}" height="{{ HEIGHT }}"></iframe>
  </div>
</div>
hapyak.responsive('hapyak-iframe-608');

... or ...

var iframeEl = window.document.getElementById('hapyak-iframe-608');

hapyak.responsive(iframeEl);

... or add a class of hapyak-responsive for auto-wrapping ...

<div class="row">
  <div class="hidden-xs col-sm-4 col-lg-8">&nbsp;</div>
  <div class="col-xs-12 col-sm-8 col-lg-4">
      <iframe class="hapyak-embed hapyak-responsive"
          marginwidth="0" marginheight="0" frameborder="no" scrolling="no"
          allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
          src="{{ HAPYAK_URL }}" width="{{ WIDTH }}" height="{{ HEIGHT }}"></iframe>
  </div>
</div>
<