LIVE PREVIEWBUY FOR $10

Lazyvideo is a jQuery plugin that lets you customise the controls of any HTML5 video ingredient that you’ve in your web site.
Make use of the themes which might be bundled with Lazyvideo, or create your personal with some easy CSS.
One common license permits you utilization on one web site.

Newest Lazyvideo model 1.0.0 (eleventh February 2014)

Documentation | Changelog | Comments | Support – FAQs

For those who like Lazyvideo, please spare a second to price it… Thanks.

Assist

For those who want assist, please use the assist discussion board and FAQs. I’ll get again to you as quickly as doable. Any direct messages could also be delayed response.

To stick to Envato market assist terms and conditions, Assist shall be supplied for six months after buy with an possibility to increase throughout buy.

For those who discover any bugs and/or wish to counsel any options then please depart a remark and they’ll all be learn and thought of.

Fast begin information

As a result of this can be a jQuery plugin, you’ll need to be utilizing jQuery in your web site.

  1. Add the lazyvideo folder to the general public folder in your server.

  2. Hyperlink Font Superior CSS to your web site, within the <head> tag. 

    <!-- Font Superior stylesheet -->
<hyperlink rel="stylesheet" sort="textual content/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

  3. Hyperlink Lazyvideo CSS to your web site, within the <head> tag. 

    <!-- Lazyvideo Default stylesheet -->
<hyperlink rel="stylesheet" sort="textual content/css" href="lazyvideo/css/lazyvideo.min.css">

  4. Add Lazyvideo Javascript beneath 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 category identify lazyvideo to any video ingredient in your HTML. 

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

Instance HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazyvideo instance web page</title>
        <!-- Lazyvideo Default stylesheet -->
        <hyperlink rel="stylesheet" sort="textual content/css" href="lazyvideo/css/lazyvideo.min.css">
    </head>
    <physique>
        <video class="lazyvideo" width="800" peak="450" src="movies/instance.video.mp4" poster="img/instance.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>
    </physique>
</html>

Choices

There are a number of choices so you may add or take away performance from Lazyvideo. You may make use of those choices utilizing information attributes. 

<video class="lazyvideo" data-fade="true">

For a full checklist of choices and superior implementation please check out the Documentation


Source