Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<div class="demo-container">
    
    <p class="redacted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    
  <article class="video"> 
    <video volume="0.2">
      
      <!-- MP4 must be first for iPad! 
      removed this as it was causing me guff!

      interestingly, add it back in to see the error

      <source src="http://files.simey.me/html5-vids/trailer.mp4" type="video/mp4">-->
        <!-- Safari / iOS, IE9 -->
        <source src="https://assets.codepen.io/13471/trailer.webm" type="video/webm">
          <!-- Chrome10+, Ffx4+, Opera10.6+ -->
<!--           <source src="https://files.simey.me/html5-vids/trailer.ogv" type="video/ogg"> -->
            <!-- Firefox3.6+ / Opera 10.5+ -->
            
            <div class="loading">
              I have a bad feeling about this... <br>
              ... your browser doesn't support the video format!
            </div>
          </video>    
        </article>
    
    <p class="redacted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
    
</div>
        
        <div class="intro">
  
  <h2>A video player ui written in CSS</h2>
  <p>Also spent a bit of time writing a jquery plugin to make the UI function, too.</p>
  <p>I especially like the subtle animation when you hit the "replay" button as the movie ends.</p>
  <ul>
    <li>It's responsive,</li>
    <li>has left/right keyboard support when you've activated the seeker,</li>
    <li>shift key increases skip time</li>
    <li>dragging/clicking support for seeking,</li>
    <li>a custom loader animation</li>
    <li>pretty sure it works in >= ie9</li>
          </ul>
  
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);

// uncomment one of these colors, 
// or try your own! =)

@color: #2bffdf;
//@color: red;
//@color: purple;
//@color: orange;


// also the UI is responsive,
// try changing your browser size!!
@size: 13px;
// this is the default pixel size.
// if can be increased for accessibility!
// @size: 20px;


article.video {

  position: relative; display: block;
  width: 100%; margin: 10px auto;
  background: rgb(52,59,74); font-size: @size;
  border-radius: 3px; overflow: hidden;
  font-family: Arial;

  // ====================================== //

  video {

    cursor: pointer;
    width: 100%; opacity:0;

    &.visible {
      opacity: 1;
      transition: opacity 1s ease-out 0.8s;
      margin-bottom: -3px;
    }

  }

  .control-bar {

    width: 100%; height: 2.2em; padding-bottom: 1px;
    position: absolute; bottom: -2.2em; left: 0;
    transition: bottom 0.3s ease-out;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;

    // ====================================== //

    .button-bar {

      width: 100%; height: 100%; position: absolute;
      background: linear-gradient(to bottom, 
      rgba(52,59,74,0.8) 0%,
      rgba(34,41,58,0.8) 100%);
      border-radius: 3px;
      z-index:2;

      // ====================================== //

      i {

        font-family: "FontAwesome"; 
        font-style: normal; font-weight: 100;
        color: white; position: absolute;
        width: 2em; height: 1.6em; line-height: 1.6em;
        text-align: center; top: 50%; margin-top: -0.75em;
        opacity: 0.6; cursor: pointer;
        transition: all 0.2s ease;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        z-index: 2;

        &:hover { opacity: 1; }
        &.hidden { opacity: 0; z-index: 1; }

        &.play,
        &.pause,
        &.replay {
          width: 2.5em;
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }

        &.fullscreen {
          left: auto; right: 0.3em;
        }


      }

      .volume {

        font-family: "FontAwesome"; 
        font-style: normal; font-weight: 100;
        color: white; position: absolute;
        width: 2em; height: 1.6em; line-height: 1.6em;
        text-align: center; top: 50%; margin-top: -0.75em;
        opacity: 0.6; cursor: pointer;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        z-index: 2; overflow: hidden;
        left: 2.3em; font-size: 1.2em;

        transition: all 0.8s ease-out;

        &.shift { width: 7.5em; transition: all 0.2s ease-in; }

        .toggle {
          left: 0;
        }

        .rail {

          position: absolute;
          left: 2.5em; top: 0;
          width: 3em; height: 100%; margin-top: 0;
          overflow: hidden;

          .grip {

            position: absolute;
            width: 0.4em; height: 1em; margin-left: -0.2em;
            left: 100%; top: 50%; margin-top: -0.5em;
            background: white;

          }

          .audible, .inaudible {

            position: absolute;
            width: 100%; height: 0.3em;
            left: 0; top: 50%; margin-top: -0.15em;
            background: @color;

          }

          .inaudible { background: #ccc; }

        }

      }

      .time {
        color: #eee; font-size: 0.8em;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        position: absolute; left: 7em; height: 2.2em;
        line-height: 2.8em; opacity: 0.9;

        transition: all 0.7s ease-in 0.2s;

        &.shift {

          left: 13em;
          transition: all 0.2s ease-out;

        }
      }

    }

    .seek {

      position: absolute;
      width: 100%; height: 3px;
      background-color: rgba(255,255,255,0.2);
      top: -2px; opacity: 0.5;
      transition: all 0.2s ease;
      cursor: pointer; z-index: 7;

      .buffer {
        position: absolute; top:0; left:0;
        width: 0%; height: 100%;
        background: rgba(255,255,255,0.3);
        border-radius: 3px; z-index: 8;
      }

      .watched {

        position: absolute; top:0; left:0;
        width: 0%; height: 100%; z-index: 8;
        background: @color; overflow: visible!important;

        &:before, &:after { 
          content: ""; position: absolute;
          right: 10px; height: 100%; width: 10px;
          background: lighten(@color,10%); 
          border-radius: 6px/3px;
          box-shadow: 0 0 2px lighten(@color,10%);
        }
        &:after { 
          right: 0px; 
          box-shadow: 0px 0 3px 0px lighten(@color,20%); 
          background: lighten(@color,20%); 
        } 

        .handle {

          position: absolute; display: block;
          right: -2px; top: -1px; width: 0px; height: 0px;  
          border: 2px solid white; 
          z-index: 9; background: transparent;
          border-radius: 100%;
          transition: all 0.3s ease;
          box-shadow: 
          inset 0 0 1px rgba(0,0,0,0.8), 
          0 0 4px 1px lighten(@color,20%);

          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: -moz-none;
          -ms-user-select: none;
          user-select: none;



          &.active {
            background: #666;
          }

          &:after {
            content: "";
            width: 26px; height: 22px;
            position: absolute;
            left: 50%; margin-left: -13px;
            top: 50%; margin-top: -15px;
          }

        }

      }
      &:after {
        content: ""; position: absolute;
        height: 20px; width: 100%; 
        bottom: -5px; left: 0; z-index: 6;
      }
      &:hover {
        height: 6px;
        top: -6px; 
      }

    }

  }

  &.active {

    .control-bar {

      bottom: 0;
      transition: bottom 0.05s ease-out;

      &.active {

        .seek {

          &:hover {

            .handle { top: -3px; }

          }

          .handle {

            width: 4px; height: 4px;
            right: -5px; top: -6px;
            border-width: 5px;
            transition: all 0.1s ease;
            box-shadow: 
            inset 0 0 1px rgba(0,0,0,0.8), 
            0 0 4px 0px lighten(@color,20%);

          }    

        }

      }

    }

    .seek { opacity: 1; }

  }


  .loading { 
    position: absolute;
    width: 100%; text-align: center; left: 0;
    top: 50%; height: 100px; margin-top: 20px;
    color: white; font-size: 0.8em; opacity: 0.1;

    transition:  all 0.4s ease;

    &.hidden {
      opacity:0; 
      top: 120%; 
      height: 0;
    }

    &:hover, &.error {
      opacity: 1;    
    }
  }

  .large-play {
    
    text-align: center;
    display: block;
    width: 50px;
    height: 50px;
    font-family: "FontAwesome"; 
    font-style: normal; 
    font-weight: 100;
    font-size: 3em;
    color: white; 
    position: absolute;
    left: 50%;
    top:50%;
    margin-top: -25px;
    margin-left: -25px;
    cursor: pointer;
    opacity: 0.8;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    transition: 0.3s ease;

    &.hidden { 
      top: 45%;
      opacity: 0;
    }

  }

  .spinner {

    display: block; overflow: visible; 
    text-indent: -999em; position: absolute;
    border-radius: 100% 0; z-index: 2;
    background: #fff;    
    top: 50%; left: 50%;
    width: 4px; height: 2px; 
    margin-left: -10px; margin-top: -10px;

    box-shadow:  
    0px 0px 3px 2px fade(@color,40%), 
    0 0 5px 3px fade(@color,40%) inset;

    border: none;

    transform-origin: 9px 9px;
    animation: 
    spin 13s cubic-bezier(0.435, -0.165, 0.560, 1.170) infinite;
    transition:  
    top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045);

    &.hidden { 
      top: 120%;
    }

    &:after { 

      content: ""; display: block;  
      position: absolute; border-radius: 100% 0; z-index: 10;
      background: #fff;

      top: 0px; left: 0px;
      width: 5px; height: 3px; 
      transform: rotate(140deg); 
      box-shadow: 0px 0px 3px 2px fade(spin(@color,-10),40%), 0 0 5px 2px fade(spin(@color,-10),40%) inset;

      animation: spin2 17s linear infinite;
      transform-origin: 9px 9px;

    }
    &:before {

      content: ""; display: block;  position: absolute; border-radius: 100% 0; z-index: 10;
      background: #fff;

      top: 0px; left: 0px;
      width: 6px; height: 4px; 
      transform: rotate(70deg);
      box-shadow: 0px 0px 5px 3px fade(spin(@color,10),40%), 0 0 5px 1px fade(spin(@color,10),40%) inset;

      animation: spin2 13s linear infinite;
      transform-origin: 9px 9px;


    }


  }

}


@media screen and ( max-width: 800px ) {

  article.video { font-size: 12px; }

}




body,html { background: #222; color: #222; } 

.intro {
  font-family: "Source Sans Pro", Arial, Helvetica;
  color: #ddd; width: 50%; margin: 30px auto;
  font-size: 1.6em; font-weight: 100;
}

.intro p { margin: 8px auto; }
.intro h2, .intro h3 {
  margin: 8px auto; 
}

.demo-container {

  width: 50%; margin: auto;
  background: #eee;
  padding: 20px;
  font-size: 14px; color: #ccc;
  line-height: 1.2;

}

.demo-container .redacted {
    display: inline;
    background: darkgrey;
    color: darkgrey;
    line-height: 1.3;
}




@font-face {
  font-family: 'FontAwesome';
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.eot?v=3.1.0');
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}




@keyframes spin {

  0% { transform: rotate(0deg); }
  10% { transform: rotate(360deg); }
  14% { transform: rotate(470deg); }
  18% { transform: rotate(490deg); }
  20% { transform: rotate(520deg); }
  22% { transform: rotate(540deg); }
  26% { transform: rotate(940deg); }
  30% { transform: rotate(1080deg); }
  40% { transform: rotate(1340deg); }
  45% { transform: rotate(1440deg); }
  55% { transform: rotate(1500deg); }
  56% { transform: rotate(1500deg); }
  86% { transform: rotate(3220deg); }
  100% { transform: rotate(3600deg); }

}


@keyframes spin2 {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(3600deg); }

}
              
            
!

JS

              
                // I was going to create a video player UI
// based off of youtube. however I couldn't
// handle it just being css layout...
// so i took a while (sheeesh) and made a plugin.
// however, it's definitely not bulletproof.


$(document).ready( function() {
    $('article.video').siPlayer(true);
});

// i did learn some things though.
// and i remember why i hate working
// with html5 apis ;(


$.fn.siPlayer = function( autoplay ) {
    
    return $(this).each( function(k,v) {
                
        var $player = $(v);
        var $video = $player.find('video');
        var src = $video.get(0).currentSrc;
        
        var _video = $video.get(0);
        
        // a few options we will need.
        
        var o = {
            
            duration: 0,
            seek: null,
            isPaused: true,
            isFinished: false,
            position: 0,
            loadingText: "Patience, Padawan...",
            shift: null
            
        };
        
        // create and store all the elements we need 
        // for controlling the video.
        
        var $el = {
            
            controls:               $('<div/>').addClass('control-bar'),
                buttons:            $('<div/>').addClass('button-bar'),
                    play:           $('<i/>').addClass('play').html("&#61515;"),
                    pause:          $('<i/>').addClass('pause hidden').html("&#61516;"),
                    replay:         $('<i/>').addClass('replay hidden').html("&#61666;"),
                    volume:         $('<div/>').addClass('volume'),
                        toggle:     $('<i/>').addClass('toggle').html('&#61480;'),
                        rail:       $('<div/>').addClass('rail'),
                           audible: $('<div/>').addClass('audible'),
                         inaudible: $('<div/>').addClass('inaudible'),
                            grip:   $('<div/>').addClass('grip'),
                    time:           $('<span/>').addClass('time'),
                        total:      $('<span/>').addClass('total'),
                        divider:    $('<span/>').html(' / '),
                        current:    $('<span/>').addClass('current'),
                        fullscreen: $('<i/>').addClass('fullscreen').html("&#61541"),
            
                seek:               $('<div/>').addClass('seek'),
                    buffer:         $('<div/>').addClass('buffer'),
                    watched:        $('<div/>').addClass('watched'),
                        handle:     $('<i/>').addClass('handle'),
            
          largePlay:                $('<span/>').addClass('large-play').html("&#61515;"),
            spinner:                $('<span/>').addClass('spinner'),
            loading:                $('<div/>')
                                        .addClass('loading')
                                        .text( o.loadingText )
                                        .attr('title',  o.loadingText +' retrieving video data')
            
        };
        
        // all the helper functions used in the plugin
        
        var funcs = {
            
            init: function() {
                
                o.duration = _video.duration;
                
                if( o.duration > 0 ) {
                    funcs.setTime();
                    funcs.getBuffered();
                    funcs.clearLoading();
                }
                
                // bind the events
                funcs.ui();
                events();
                
                // auto play after timer, because won't play
                // right away for some reason.
                if( autoplay ) {

                  setTimeout( function() {
                    $el.play.trigger('mouseup.play');
                    _video.volume = 0.1;
                  },1000);
                  
                } else {

                  setTimeout(function() {
                    $el.largePlay.removeClass('hidden');
                  },800);
                  
                }
                
            },
            
            ui: function() {
              
                $player.append( $el.controls );
                
                $el.controls.append( 
                    $el.buttons , 
                    $el.seek 
                );
                
                $el.buttons.append( 
                    $el.play , 
                    $el.pause , 
                    $el.replay ,
                    $el.volume ,
                    $el.time ,
                    $el.fullscreen
                );
                
                $el.volume.append(
                    $el.toggle ,
                    $el.rail
                );
                
                $el.rail.append( 
                    $el.inaudible ,
                    $el.audible ,
                    $el.grip 
                );
                
                $el.seek.append(
                    $el.buffer ,
                    $el.watched
                );
                
                $el.watched.append( $el.handle );
                
                $el.time.append(
                    $el.current ,
                    $el.divider,
                    $el.total
                );
                
                $video.addClass('visible');
                
            },
            
            fullscreen: function() {
                
                if($player.get(0).requestFullScreen) {
                    $player.get(0).requestFullScreen();
                } else if($player.get(0).mozRequestFullScreen) {
                    $player.get(0).mozRequestFullScreen();
                } else if($player.get(0).webkitRequestFullScreen) {
                    $player.get(0).webkitRequestFullScreen();
                }
                
            },
          
            loadFail: function() {
            
              $el.loading
                .addClass('error')
                .text("I've got a bad feeling about this...");
              
              // we're proceeding but it'll
              // probably be a problem... probably.
              
              funcs.init();
            
            },
            
            getPos: function( time ) {
                
                time = time || _video.currentTime;
                var pixels = ( $el.seek.width() / o.duration ) * time;                
                return { time: time , pixels: pixels };
                
            },
            
            toHHMMSS: function( secs ) {
                
                var secs    = parseInt(secs, 10);
                var hours   = Math.floor(secs / 3600);
                var minutes = Math.floor((secs - (hours * 3600)) / 60);
                var seconds = secs - (hours * 3600) - (minutes * 60);
                
                if (hours   < 10) {hours   = "0"+hours;}
                if (minutes < 10) {minutes = ""+minutes;}
                if (seconds < 10) {seconds = "0"+seconds;}
                
                var time;
                if( hours === "00" ) { time = minutes+':'+seconds; } 
                else { time = hours+':'+minutes+':'+seconds; }
                
                return time;
                
            },
            
            setTime: function() {
                
                var current = funcs.toHHMMSS( funcs.getPos().time.toString() );
                var total = funcs.toHHMMSS( o.duration.toString() );
                
                $el.current.text( current );
                $el.total.text( total );
                
            },
            
            setVolume: function( e ) {
                
                if( !$(e.target).is( $el.grip ) ) {
                    
                    if( $(e.target).is( $el.rail ) || $(e.target).is( $el.rail.find("*") ) ) {
                        
                        var x = e.offsetX || e.originalEvent.layerX;
                        
                        var perc = Math.floor( x / $el.rail.width() * 100);
                        $el.grip.css({ left:  + perc + "%" });
                        
                        var vol = _video.volume;
                        if( perc > 1 && perc < 99 ) { 
                            vol = perc/100;
                        }
                        _video.volume = vol;
                        
                        if( perc < 3 ) {
                            funcs.toggleMute( true );
                        } else {
                            funcs.toggleMute( false )   
                        }
                        
                    }
                    
                }
                
            },
            
            toggleMute: function( on ) {
                
                if( on !== undefined ) {
                    if( on ) {
                        $video.prop('muted', false);
                        $el.toggle.html('&#61480;');
                    } else {
                        $video.prop('muted', true);
                        $el.toggle.html('&#61478;')
                    }
                }
                
                if( $video.prop('muted') ) {
                    
                    $video.prop('muted', false);
                    $el.toggle.html('&#61480;');
                    
                    //if( _video.volume < 5 ) { _video.volume = 10; }
                    
                } else {
                    $video.prop('muted', true);
                    $el.toggle.html('&#61478;');
                }
                
            },
            
            reachEnd: function() {
             
                _video.pause();
                o.isPaused = true;
                o.isFinished = true;
                o.handleFocus = false;
                
                $el.play.addClass('hidden');
                $el.pause.addClass('hidden');
                $el.replay.removeClass('hidden');
                $el.largePlay.removeClass('hidden');
                
                clearTimeout(o.seek);
                
            },
            
            play: function() {
                
                _video.play();
                o.isPaused = false;
                
                $el.play.addClass('hidden');
                $el.largePlay.addClass('hidden');
                $el.pause.removeClass('hidden');
                
                funcs.clearLoading();
                
                clearTimeout(o.seek);
                o.seek = setInterval( function() {
                    
                    var w = funcs.getPos();
                    $el.watched.width( w.pixels );
                    
                    if( w.time >= o.duration ) {
                        funcs.reachEnd();
                    }
                    
                    funcs.setTime();
                    funcs.getBuffered();
                   
                }, 100 );
                
            },
            
            pause: function() {
                
                _video.pause();
                o.isPaused = true;
                
                $el.pause.addClass('hidden');
                $el.replay.addClass('hidden');
                $el.play.removeClass('hidden');
                $el.largePlay.removeClass('hidden');
                
                clearTimeout(o.seek);
                
            },
            
            replay: function() {
                
                o.isFinished = false;
                o.isPaused = false;
                
                $el.pause.addClass('hidden');
                $el.replay.addClass('hidden');
                $el.play.removeClass('hidden');
                $el.largePlay.removeClass('hidden');
                
                $el.watched.animate({ 
                    'width': '0' 
                }, { 
                    duration: 330 , 
                    complete: function() { 
                        _video.currentTime = 0;
                        $el.play.trigger('mouseup.play');
                    }
                });
                
            },
            
            seek: function( x , time ) {
                
                x = x || 0;
                
                if( !time ) {
                    
                    var perc = x / $el.seek.width() * 100;
                    var pos = o.duration / 100 * perc;
                    
                    _video.currentTime = pos;                    
                    
                } else {
                    
                    _video.currentTime = x;
                    
                }
                
                funcs.setTime();
                var w = funcs.getPos();
                $el.watched.width( w.pixels );
                
                if( o.isFinished ) {
                    funcs.pause();
                    o.isFinished = false;
                }
                                    
                if( w.time >= o.duration ) {
                    funcs.reachEnd();
                }
                
            },
            
            handleDrag: function(x) {
                
                if( !o.isPaused ) { 
                    funcs.pause(); 
                    o.resume = true; 
                }
                
                
                var perc = x / $el.seek.width() * 100;
                var pos = o.duration / 100 * perc;
                
                var w = funcs.getPos(pos);
                $el.watched.width( w.pixels );
                
                funcs.seek( x );
                
            },
            
            getBuffered: function() {
                
                var buffered = 0;
                if( _video.buffered.length > 0 ) {
                    
                    buffered = _video.buffered.end(0);
                    $el.buffer.width( funcs.getPos( buffered ).pixels );
                
                }
                
                return buffered;
                
            },
            
            clearLoading: function() {
             
                $el.spinner.addClass('hidden');
                $el.loading.addClass('hidden');
                $video.removeClass('hidden');

                setTimeout(function() {
                  $el.spinner.remove();
                  $el.loading.remove();
                },1000);
                
            }
            
        };
        
        var events = function() {
            
            var t;
            
            $(window).on({
               
                'keydown': function(e) {
                    if( o.handleFocus ) {
                        
                        var seek = 0;
                        if( e.keyCode === 39 ) { seek = 0.1; }
                        else if (e.keyCode === 37 ) { seek = -0.1; }
                        
                        if( e.shiftKey ) { seek = seek * 10; }
                        
                        funcs.pause();
                        var time = funcs.getPos().time + seek;
                        funcs.seek( time , true );
                        
                    }
                }
                
            });
            
            $player.on({
                
                'mousedown.player': function(e) {
                    var $what = $el.seek.add( $el.handle ).add( $el.seek.find("*") );
                    if( $(e.target).is( $what ) ) {
                        o.handleDragging = true;
                        o.handleFocus = true;
                    } else {
                        o.handleFocus = false;
                    }
                },
                
                'mouseup.player': function(e) {
                    o.handleDragging = false;
                    if( o.resume ) { 
                        funcs.play(); 
                        o.resume = false; 
                    }
                },
                
                'mousemove.player': function(e) {
                    if( o.handleDragging ) {
                        
                        // FF won't expose offsetX, so we get layerX.
                        var x = e.offsetX || e.originalEvent.layerX;
                        
                        // when mouse is over the handle, it has a
                        // different offsetX, so we need to calculate
                        if( $(e.target).is($el.controls.find("*")) ) {
                            
                            if( $(e.target).is( $el.time.add( $el.time.find("*") ) ) ) {
                                x += $el.time.get(0).offsetLeft;
                            } else if( $(e.target).is( $el.volume.add( $el.volume.find("*") ) ) ) {
                                x += $el.volume.get(0).offsetLeft;
                            } else {
                                x += e.target.offsetLeft;   
                            }
                            
                        }
                        o.lastDrag = x;
                        funcs.handleDrag(x);
                    }
                },
                
                'mouseleave.player': function(e) {
                 
                    if( o.handleDragging ) {
                        
                        var x;
                        
                        if( o.lastDrag > $player.width()*0.5 ) {
                            x = $player.width();
                        } else if( o.lastDrag < $player.width()*0.5 ) {
                            x = 0;
                        }
                        
                        o.lastDrag = x;
                        o.handleDragging = false;
                        funcs.handleDrag(x);
                        
                        
                    }
                    
                }
                
            });
            
            $video.on({
                
                'mouseenter.video': function (e) {
                    // set the class active, so the CSS can
                    // show the controls bar.
                    clearTimeout(t);
                    $player.addClass('active');
                },
                
                'mouseleave.video': function (e) {
                    // remove the class after short duration
                    clearTimeout(t);
                    t = setTimeout(function () {
                        $player.removeClass('active');
                        $el.controls.removeClass('active');
                    }, 700);
                },
                
                'mousemove.video': function (e) {
                    // while we are moving around the player
                    // is always active.
                    $player.addClass('active');
                    
                    // but if we stop (outside of the control bar) we
                    // want the player to be inactive.
                    clearTimeout(t);
                    t = setTimeout(function () {
                        $player.removeClass('active');
                        $el.controls.removeClass('active');
                    }, 2000);
                    
                },
                
                'click.video': function() {
                    
                    if( o.isFinished ) {                        
                        $el.replay.trigger('mouseup.replay');
                    } else if( o.isPaused ) {
                        $el.play.trigger('mouseup.play');
                    } else {
                        $el.pause.trigger('mouseup.pause');   
                    }
                    
                }
                
            });
            
            $el.handle.on({
               
                'mouseover': function(e) {
                    $el.handle.addClass('active');
                },
                
                'mouseout': function(e) {
                    $el.handle.removeClass('active');
                },
                
                'mousedown': function(e) {
                     o.handleFocus = true;   
                }
                
            });
            
            $el.controls.on({
               
                'mouseenter.controls': function (e) {
                    // make sure the controls are always
                    // active when we are on them.
                    clearTimeout(t);
                    $player.addClass('active');
                    $el.controls.addClass('active');
                    
                },
                
                'mouseleave.controls': function (e) {
                    // remove the class after short duration
                    clearTimeout(t);
                    t = setTimeout(function () {
                        $player.removeClass('active');
                        $el.controls.removeClass('active');
                    }, 700);
                }
                
            });
            
            $el.play.on({
                                
                'mouseup.play': function(e) {
                    funcs.play();
                }
                
            });
            
            $el.largePlay.on({
                                
                'click.play': function() {
                    
                    if( o.isFinished ) {                        
                        $el.replay.trigger('mouseup.replay');
                    } else if( o.isPaused ) {
                        $el.play.trigger('mouseup.play');
                    } else {
                        $el.pause.trigger('mouseup.pause');   
                    }
                    
                }
                
            });
            
            $el.pause.on({
                
                'mouseup.pause': function(e) {
                    funcs.pause();                  
                }
                
            });
            
            $el.replay.on({
                
                'mouseup.replay': function(e) {
                    funcs.replay();
                }
                
            });
            
            $el.volume.on({
               
                'mouseup.volume': function(e) {
                    
                    if( $(e.target).is( $el.toggle ) ) {
                         funcs.toggleMute();   
                    }
                    
                },
                
                'mousedown.volume': function(e) {
                    if( !$(e.target).is( $el.toggle ) ) {
                        funcs.setVolume( e ); 
                    }
                },
                
                'mouseenter.volume': function(e) {
                    clearTimeout(o.shift);
                    $el.time.addClass('shift');
                    $el.volume.addClass('shift');
                },
                
                'mouseleave.volume': function(e) {
                    o.shift = setTimeout( function() {
                        $el.time.removeClass('shift');
                        $el.volume.removeClass('shift');
                    },1000);
                }
                
            });
            
            $el.fullscreen.on({
               
                'mouseup': function(e) {
                    
                    funcs.fullscreen();
                    
                }
                
            });
            
            $el.seek.on({
               
                'mouseup.seek': function(e) {
                    
                    // dont seek if we clicked the handle
                    if( !$(e.target).is( $el.handle ) ) { 
                        // FF won't expose offsetX, so we get layerX.
                        var x = e.offsetX || e.originalEvent.layerX;
                        funcs.seek(x);
                    }
                    
                }
                
            });
            
        };
        
        // we have to stop the other events being bound until this
        // event has completed, or we'll have major issues.
        // so it sits out of the events() setup.
        
        $el.loading.appendTo( $player );
        $el.spinner.appendTo( $player );
        $el.largePlay.appendTo( $player ).addClass("hidden");
        
        var loop = 0;
        var ready = setInterval( function() {
           
            var state = _video.readyState;
            loop++;
            
            if( state > 1 ) {
             
                clearInterval( ready );
                
                // save the length (time) of the video.
                o.duration = _video.duration;
                
                funcs.setTime();
                funcs.getBuffered();
                funcs.init();
                
            }
            
            if( state < 1 && loop > 30 ) {
                
                clearInterval( ready );
                funcs.loadFail();
                
            }
            
            
        }, 500 );
        
    });
    
};




              
            
!
999px

Console