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>