Пишем код HTML:
Получаем следующий результат:
HTML:
<style type="text/css">
.wrapper {
width: 100%; /* responsive */
height: 450px;
background-color: #f2f2f2; /* to see the size of the wrapper */
}
</style>
<div class="wrapper">
<div id="target"></div>
</div>
<script src="https://player.animatron.com/latest/bundle/animatron.min.js"></script>
<script type="text/javascript">
anm.Player.forSnapshot(
'target', /* target tag ID */
'https://publish.animatron.io/4d9034581b99f90cd71e16b1.json', /* snapshot URL */
anm.importers.create('animatron'),
function() {
var player = this;
var wrapper = document.querySelector('.wrapper');
var windowResize = function() {
var rect = wrapper.getBoundingClientRect();
console.log(rect);
player._resize(rect.width, rect.height);
};
windowResize();
window.addEventListener('resize', windowResize);
},
{ribbonsColor: 'transparent', controlsEnabled: false, autoPlay: true, repeat: true}
);
</script>