Page Contents

    Brightcove Interactivity Responsive API

    Brightcove Interactivity provides a responsive design wrapper for Brightcove Interactivity instances.

    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>

    Page last updated on 21 Sep 2022