JSFiddle - React, Tailwind, and code Playground

by jaibuu

HTML

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
        // Bit hacky that this is loaded here in JSFiddle. should really
        // belong in the javascript section below
        
        /*
 * Chromeless player has no controls.
 */


// This function is called when the player changes state
function onPlayerStateChange(newState) {
        // check if the state is the ended state (0)
        if(newState == 0)
            alert("Boom the clip has ended, plum up a database call to do something useful with this information now");
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("ytPlayer");
  // add the event listener for stateChanges
  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
  //Load an initial video into the player
  ytplayer.cueVideoById("ofV_iFBw2YE");
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
  // Lets Flash from another domain call JavaScript
  var params = { allowScriptAccess: "always" };
  // The element id of the Flash embed
  var atts = { id: "ytPlayer" };
  // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
  swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
                     "version=3&enablejsapi=1&playerapiid=player1",
                     "videoDiv", "480", "295", "9", null, null, params, atts);
}

function _run() {
    loadPlayer();
}

google.setOnLoadCallback(_run);
    </script>
<div id="videoDiv">Loading...</div>