JSFiddle - React, Tailwind, and code Playground

by jeffposnick

HTML

<iframe
  id="player"
  class="testclass"
  type="text/html"
  width="640"
  height="390"
  src="http://www.youtube.com/embed/UeNC8H9rnLE?enablejsapi=1"
  frameborder="0">
</iframe>
<script src="https://www.youtube.com/iframe_api"></script>

JavaScript

var player;

function onYouTubeIframeAPIReady() {
    var el = document.querySelector('.testclass');
    player = new YT.Player(el, {
        events: {
            onReady: onReady,
            onStateChange: onStateChange,
            onError: onError,
            onApiChange: onApiChange,
            onVideoAreaChange: onVideoAreaChange
        }
    });
}

function onReady(e) {
    console.log('onReady');
}

function onStateChange(e) {
    console.log('onStateChange', e);
}

function onError(e) {
    console.log('onError', e);
}

function onApiChange(e) {
    console.log('onApiChange', e);
}

function onVideoAreaChange(e) {
    console.log('onVideoAreaChange', e.data);
}