JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<button id='animate'>animate</button>
<button id='restore'>restore</button>
<div id='player'></div>

SCSS

$height: 240px;
$width: 320px;
$resize-factor: 0.65;
$transition: width 300ms ease-in-out, height 300ms ease-in-out;

iframe {
  width: $width;
  height: $height;
}

.start-miniplayer {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

.miniplayer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: $width * $resize-factor;
  height: $height * $resize-factor;
}

JavaScript

const container = document.getElementById('player');
const player = new Twitch.Player(container, { 
  channel: 'monstercat'
});

document.getElementById('animate').addEventListener('click', () => {
  const [frame] = container.getElementsByTagName('iframe');
  frame.className = 'miniplayer start-miniplayer';
  // currently broken
  player.setMiniPlayerMode(true);
});

document.getElementById('restore').addEventListener('click', () => {
  const [frame] = container.getElementsByTagName('iframe');
  frame.className = '';
});