JSFiddle - React, Tailwind, and code Playground

by deadlyicon

HTML

<!DOCTYPE html>
<html>
  <html>
    <style>
      html, body {
        height: 100%;
        width: 100%;
        background-color: black;
        padding: 0;
        margin: 0;
      }
      .players{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: stretch;
        min-height: 100vh;
      }
      .player{
        height: 60vh;
      }
      .player:first-child{
        flex: 2 2;
      }
      .player:last-child{
        flex: 1 1;
      }
    </style>
  </html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div class="players">
      <div class="player" id="shallow"></div>
      <div class="player" id="dog"></div>
    </div>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var shallowPlayer, dogPlayer;
      function onYouTubeIframeAPIReady() {
        function createPlayer(id, videoId, startingPoint){
          const player = new YT.Player(id, {
            height: '',
            width: '',
            videoId,
            playerVars: {
              'autoplay': 0,
              // 'controls': 0,
            },
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onError,
            }
          });
          player.__videoId = videoId;
          player.__startingPoint = startingPoint;
          return player
        }
        shallowPlayer = createPlayer('shallow', 'fKazTWxzQeY', 41);
        dogPlayer = createPlayer('dog', 'wyX7_FGmJFg', 19);
      }

      function onError(event){
        console.log('ERROR', event)
      }

      function onPlayerReady(event) {
        console.log('onPlayerReady!', event,
          event.target === shallowPlayer ? 'shallowPlayer' :
          event.target === dogPlayer ?...