JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div id="player"></div>
</div>

CSS

body { margin: 0; transition: background-color 0.2s; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; background-color: #eee; padding: 10rem 3rem; transition: background-color 0.2s; text-align: center; }

body.play, .container.play { background-color: #000; }

iframe { margin: 0 auto; }

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        switch(event.data) {
          case 1:
            $('body').addClass('play');
            break;
          case 2:
            $('body').removeClass('play');
        }
      }