Brightcove Interactivity Responsive API

Enable the API

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: Brightcove Interactivity Viewer instance, Brightcove Interactivity IFRAME element, Brightcove Interactivity IFRAME DOM ID string

Supported container values: HTML element or DOM ID string

Brightcove Interactivity 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-"></div>
          </div>
      </div>
  </div>
</div>

hapyak.viewer({
  apiKey: HAPYAK_API_KEY,
  /* ... */
  onLoad: function (viewer) {
      hapyak.responsive(viewer);
  }
});

Brightcove Interactivity 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__responsive" class="videoPadding">
        <div id="wistia_" 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');
      }
  });
});

Brightcove Interactivity 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:px;height:px;"></div>
  </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="" width="" height=""></iframe>
  </div>
</div>