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>
        
        <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 id="sliderBar"><div id="sliderKnob"></div></div>
            <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>
        <span id="playpause"><a href="javascript:void(0);" onclick="playPauseVideo();">Play</a></span>
        <a href="javascript:void(0);" onclick="muteButton();" id="mutebutton">Mute</a>
    </body>
</html>
​

CSS

#wrapper {
    width: 480px;
}

* {outline: 0}

#sliderBar {
    height: 18px;
    width:480px;
    background: #e3e3e3;
    -webkit-border-radius:2px;
}

#sliderKnob {
    display:block;
    height:18px;
    width:18px;
    background:#808080;
    -webkit-border-radius:2px;
}

JavaScript

/* MooTools YouTube JS */

var sliding = 0;

new Slider('sliderBar', 'sliderKnob', {
    range: [0, 100],
    onTick: function(pos){

    },
    onComplete: function(){

    }
});

/*
       * Chromeless player has no controls.
       */

// 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);
    if (newState == 1) {
        updateHTML("playpause", "<a href='javascript:void(0);' onclick='pauseVideo();'>Pause</a>");
    } else if (newState == 3) {
        updateHTML("playpause", "...");
    } else {
        updateHTML("playpause", "<a href='javascript:void(0);' onclick='playVideo();'>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());

    }
}


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

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

function muteButton() {
    if (ytplayer.isMuted() === true) {
        ytplayer.unMute();
        updateHTML("mutebutton", "Mute");
    } else {
        ytplayer.mute();
        updateHTML("mutebutton", "Unmute");
    }
}

function muteVideo() {
    if (ytplayer) {
        ytplayer.mute();
    }
}

function unMuteVideo() {
    if (ytplayer) {
        ytplayer.unMute();
    }
}


// This...