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><p class="time"><span id="videoCurrentTime">--:--</span> / <span id="videoDuration">--:--</span></p>
        <span class="clearfix"></span>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br>
      <p>Player state: <span id="playerState">--</span></p>
    <p id="currenttime"></p>
    <p id="duration"></p>
    </div>
      
  </body>
</html>

CSS

#wrapper {
    width: 556px;
}

#playpause {
    float:left;
    margin-bottom: 4px;
    margin-left: 9px;
}

.controller {
    width: 556px;
    border-bottom: 1px dotted #e3e3e3;
}

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

#mutebutton {float:left;}

p.time { display: block; width: 70px; text-align: right; float: right; margin-right: 9px; font-size: 11px; line-height: 16px; }

* {outline: 0}
.clearfix {display:block;clear:both;height:0;}

JavaScript

// Prepping for daily sesh

var sliding = 0;

// Create slider
$("#slider").slider({ animate: true });

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

// Convert Seconds to M:SS
var makeMinutes = function(seconds) {
    seconds = Math.ceil(seconds);
    var minutes = Math.floor(seconds / 60);
    var sec = seconds - (minutes * 60);
    if ( sec < 10 ) {
        sec = '0' + sec;
    }
    return minutes + ":" + sec;
}

      // 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", makeMinutes(ytplayer.getDuration()));
          updateHTML("videoCurrentTime", makeMinutes(ytplayer.getCurrentTime()));
            var bigduration = (ytplayer.getDuration() * 10);
            var bigcurrenttime = (ytplayer.getCurrentTime() * 10);
          $("#slider").slider({ animate: false, max: bigduration, value: bigcurrenttime });
          updateHTML("currenttime", ytplayer.getCurrentTime());
 ...