@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
69 lines (64 loc) • 1.98 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Gobi - Web Integration test</title>
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<script type="text/javascript" src="/dist/run-config.js"></script>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<div style="display: flex; flex-direction: column; align-items: center;">
<div id="gobi-player"
style="display: inline-block; width: 306px; max-width: 50vw; height: 544px; max-height: 100vh; border: 1px solid purple">
</div>
<div style="margin-top: 1rem">
<button id="destroy-player">Destroy Player</button>
<button id="init-player">Full Player</button>
<button id="compact-player">Compact Player</button>
</div>
<div style="margin-top: 1rem">
<span>Resize the page to see the effect of
<pre style="display: inline-block">max-width</pre>
and
<pre style="display:inline-block;">max-height</pre>
on the container
</span>
</div>
<div style="height: 4000px; background: red">
Halla
</div>
</div>
<script>
let player;
function initPlayer(width, height) {
if (player) {
player.destroy();
}
player = new gobi.Player({
container: '#gobi-player',
storyId: 'demo04',
autoStart: false,
width: width,
height: height,
apiBaseUrl: runConfig.apiBaseUrl,
});
}
initPlayer(612, 1088);
window.document
.getElementById('destroy-player')
.addEventListener('click', function () {
player.destroy();
});
window.document
.getElementById('init-player')
.addEventListener('click', function () {
initPlayer(612, 1088);
});
window.document
.getElementById('compact-player')
.addEventListener('click', function () {
initPlayer(153, 272);
});
</script>
</body>
</html>