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>
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
<div class="row">
<div class="hidden-xs col-sm-4 col-lg-8"> </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);
}
});
<div class="row">
<div class="hidden-xs col-sm-4 col-lg-8"> </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');
}
});
});
<div class="row">
<div class="hidden-xs col-sm-4 col-lg-8"> </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);
}
});
<div class="row">
<div class="hidden-xs col-sm-4 col-lg-8"> </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"> </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>