JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>YouTube Player API Sample</title>
      
      
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      
      
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>    
    <script type="text/javascript">

    </script>
       
<script>
      </script>
        
  </head>
  <body style="font-family: Arial;border: 0 none;">
<div id="wrapper">
      <div id="videoDiv">Loading...</div>
    <div class="controller">
      <span id="playpause"><a href="javascript:void(0);" onclick="playPauseVideo();" class='ui-icon ui-icon-play'>Play</a></span><div id="slider" style="font-size:11px;"></div><a href="javascript:void(0);" onclick="muteButton();" id="mutebutton" class='ui-icon ui-icon-volume-on'>Mute</a>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br>
      <p>Player state: <span id="playerState">--</span></p>
        <p>Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p>
        <p>Controls: <a href="javascript:void(0);" onclick="playVideo();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo();">Pause</a> | <a href="javascript:void(0);" onclick="muteVideo();">Mute</a> | <a href="javascript:void(0);" onclick="unMuteVideo();">Unmute</a></p>
    </div>
      
      
  </body>
</html>
​

CSS

#wrapper {
    width: 480px;
}

#playpause {
    float:left;
}

.controller {
    width: 480px;
}

#slider {
    width: 428px;
    float:left;
    margin: 3px 9px 0 9px;
}

* {outline: 0}

JavaScript

/*
       * Chromeless player has no controls.
       */    
            var sliding = 0;
$("#slider").slider({ animate: true });

$( ".playbutton" ).button({ icons: {primary:'ui-icon-play'} });

      // Update a particular HTML element with a new value
      function updateHTML(elmId, value) {
        document.getElementById(elmId).innerHTML = value;
      }
      
      // This function is called when an error is thrown by the player
      function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
      
      // This function is called when the player changes state
      function onPlayerStateChange(newState) {
        updateHTML("playerState", newState);
        ytplayer.setVolume(100);
          if (newState == 1) {
              updateHTML("playpause", "<a href='javascript:void(0);' onclick='pauseVideo();' class='ui-icon ui-icon-pause'>Pause</a>");
          } else {
              updateHTML("playpause", "<a href='javascript:void(0);' onclick='playVideo();' class='ui-icon ui-icon-play'>Play</a>");
          }
      }
      
      // Display information about the current state of the player
      function updatePlayerInfo() {
        // Also check that at least one function exists since when IE unloads the
        // page, it will destroy the SWF before clearing the interval.
        if(ytplayer && ytplayer.getDuration && sliding == 0) {
          updateHTML("videoDuration", ytplayer.getDuration());
          updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
          $("#slider").slider({ animate: true, max: ytplayer.getDuration(), value: ytplayer.getCurrentTime() });
        }
      }

      
      function playVideo() {
        if (ytplayer) {
          ytplayer.playVideo();
        }
      }

      function pauseVideo() {
        if (ytplayer) {
          ytplayer.pauseVideo();
        }
      }

      function muteButton() {
          if (ytplayer.isMuted() == true) {
              ytplayer.unMute();
  ...