Button color

Control bar color

Tracker color

Control bar styles

Hide Control Bar

Quick start guide

Because this is a jQuery plugin, you will need to be using jQuery on your website.

We have opted to use Font Awesome for this project for all our icons so you will also need to add the Font Awesome css into the <head> of your HTML document.

  1. Upload the lazyvideo folder to the public folder on your server.
  2. Link Font Awesome CSS to your site, in the <head> tag.

    <!-- Font Awesome stylesheet -->
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  3. Link Lazyvideo CSS to your site, in the <head> tag.

    <!-- Lazyvideo Default stylesheet -->
    <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
  4. Add Lazyvideo Javascript below the jQuery library.

    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <!-- Lazyvideo Javascript -->
    <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
  5. Add the class name lazyvideo to any video element in your HTML.

    <video class="lazyvideo"></video>

Example HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazyvideo example page</title>
        <!-- Lazyvideo Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
    </head>
    <body>
        <video class="lazyvideo" width="800" height="450" src="videos/example.video.mp4" poster="img/example.poster.jpg"></video>
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Lazyvideo Javascript -->
        <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
    </body>
</html>

Features

Easy to use

Just add class lazyvideo to any video element to add custom controls to your HTML5 video.

Cross browser compatible

Works in IE8, IE9, IE10, IE11, Chrome, Firefox and Safari.

Small footprint

With the default CSS under 1KB and the Javascript under 8KB (minified version 1.0.0), the library is really small.

Responsive

Lazyvideo can be set to 100% so the video element can resize when the page is resized.

Themeable

Easy to theme with a few lines of css. There are 3 themes bundled for now with more to come.
Suggestions welcome.

Lifetime Support

FREE lifetime support if something goes wrong. Customisation may be provided upon request.

Free Updates

Lazyvideo is currently in version 1 and there are limitless possibilities. There will be constant updates based on suggestions and ideas provided by you.