HTML
<div class="player">
    <div class="mediaplayer">
        <video controls preload="none">
            <source src="https://www.youtube.com/watch?v=RnqAXuLZlaE"/>
        </video>
    </div>
    <hr />
    <p><a href="http://afarkas.github.io/webshim/demos/index.html#Media-elements">webshims mediaelement documentation</a></p>
    <hr />
    <table>
        <thead>
            <th>property</th>
            <th>value/control</th>
        </thead>
        <tbody>
            <tr>
                <th>currentTime</th>
                <td><span class="current-time"></span>

                </td>
            </tr>
            <tr>
                <th>duration</th>
                <td><span class="duration"></span>

                </td>
            </tr>
            <tr>
                <th>progress</th>
                <td><span class="progress">0</span>

                </td>
            </tr>
            <tr>
                <th>paused-state</th>
                <td><span class="paused-state">true</span>

                </td>
            </tr>
            <tr>
                <th>muted-state</th>
                <td><span class="muted-state">false</span>

                </td>
            </tr>
            <tr>
                <th>volume</th>
                <td><span class="volume">1</span>

                </td>
            </tr>
            <tr>
                <th>videoWidth/videoHeight</th>
                <td><span class="height-width">-/-</span>

                </td>
            </tr>
            <tr>
                <th>networkState</th>
                <td><span class="network-state"></span>

                </td>
            </tr>
            <tr>
                <th>readyState</th>
                <td><span class="ready-state"></span>

                </td>
            </tr>
            <tr>
                <th>currentTime</th>
                <td>
                    <input class="time-slider" type="range" disabled value="0" step="any" />
                </td>
            </tr>
            <tr>
                <th>play</th>
                <td>
                    <input value="play" type="button" class="play" />
                </td>
            </tr>
            <tr>
                <th>pause</th>
                <td>
                    <input value="pause" type="button" class="pause" />
                </td>
            </tr>
            <tr>
                <th>muted</th>
                <td>
                    <input class="muted" type="checkbox" />
                </td>
            </tr>
            <tr>
                <th>volume</th>
                <td>
                    <input class="volume-slider" type="range" value="1" max="1" step="0.01" />
                </td>
            </tr>
        </tbody>
    </table>
</div>


JQUERY
if (jQuery.webshims && window.Modernizr) {
    (function () {

        webshims.setOptions('mediaelement', {
            replaceUI: 'auto'
        });
        webshims.setOptions({types: 'range'});
        webshims.setOptions('extendNative', true);
        webshims.polyfill('mediaelement forms forms-ext');
    })();
}


//add some controls
jQuery(function ($) {
    $('div.player').each(function () {
        var player = this;
        var getSetCurrentTime = createGetSetHandler(

        function () {
            $('input.time-slider', player).prop('value', $.prop(this, 'currentTime'));
        }, function () {
            try {
                $('video, audio', player).prop('currentTime', $.prop(this, 'value'));
            } catch (er) {}
        });
        var getSetVolume = createGetSetHandler(

        function () {
            $('input.volume-slider', player).prop('value', $.prop(this, 'volume'));

        }, function () {
            $('video, audio', player).prop('volume', $.prop(this, 'value'));
        });
        $('video, audio', this).bind('durationchange updateMediaState', function () {
            var duration = $.prop(this, 'duration');
            if (!duration) {
                return;
            }
            $('input.time-slider', player).prop({
                'max': duration,
                disabled: false
            });
            $('span.duration', player).text(duration);
        }).bind('progress updateMediaState', function () {
            var buffered = $.prop(this, 'buffered');
            if (!buffered || !buffered.length) {
                return;
            }
            buffered = getActiveTimeRange(buffered, $.prop(this, 'currentTime'));
            $('span.progress', player).text(buffered[2]);
        }).bind('timeupdate', function () {
            $('span.current-time', player).text($.prop(this, 'currentTime'));
        }).bind('timeupdate', getSetCurrentTime.get).bind('emptied', function () {
            $('input.time-slider', player).prop('disabled', true);
            $('span.duration', player).text('--');
            $('span.current-time', player).text(0);
            $('span.network-state', player).text(0);
            $('span.ready-state', player).text(0);
            $('span.paused-state', player).text($.prop(this, 'paused'));
            $('span.height-width', player).text('-/-');
            $('span.progress', player).text('0');
        }).bind('waiting playing loadedmetadata updateMediaState', function () {
            $('span.network-state', player).text($.prop(this, 'networkState'));
            $('span.ready-state', player).text($.prop(this, 'readyState'));
        }).bind('play pause', function () {
            $('span.paused-state', player).text($.prop(this, 'paused'));
        }).bind('volumechange', function () {
            var muted = $.prop(this, 'muted');
            $('span.muted-state', player).text(muted);
            $('input.muted', player).prop('checked', muted);
            $('span.volume', player).text($.prop(this, 'volume'));
        }).bind('volumechange', getSetVolume.get).bind('play pause', function () {
            $('span.paused-state', player).text($.prop(this, 'paused'));
        }).bind('loadedmetadata updateMediaState', function () {
            $('span.height-width', player).text($.prop(this, 'videoWidth') + '/' + $.prop(this, 'videoHeight'));
        }).each(function () {
            if ($.prop(this, 'readyState') > $.prop(this, 'HAVE_NOTHING')) {
                $(this).triggerHandler('updateMediaState');
            }
        });

        $('input.time-slider', player).bind('input', getSetCurrentTime.set).prop('value', 0);
        $('input.volume-slider', player).bind('input', getSetVolume.set);

        $('input.play', player).bind('click', function () {
            $('video, audio', player)[0].play();
        });
        $('input.pause', player).bind('click', function () {
            $('video, audio', player)[0].pause();
        });
        $('input.muted', player).bind('click updatemuted', function () {
            $('video, audio', player).prop('muted', $.prop(this, 'checked'));
        }).triggerHandler('updatemuted');
        $('input.controls', player).bind('click', function () {
            $('video, audio', player).prop('controls', $.prop(this, 'checked'));
        }).prop('checked', true);
    });
});

//helper for createing throttled get/set functions (good to create time/volume-slider, which are used as getter and setter)

function createGetSetHandler(get, set) {
    var throttleTimer;
    var blockedTimer;
    var blocked;
    return {
        get: function () {
            if (blocked) {
                return;
            }
            return get.apply(this, arguments);
        },
        set: function () {
            clearTimeout(throttleTimer);
            clearTimeout(blockedTimer);

            var that = this;
            var args = arguments;
            blocked = true;
            throttleTimer = setTimeout(function () {
                set.apply(that, args);
                blockedTimer = setTimeout(function () {
                    blocked = false;
                }, 30);
            }, 0);
        }
    };
};

function getActiveTimeRange(range, time) {
    var len = range.length;
    var index = -1;
    var start = 0;
    var end = 0;
    for (var i = 0; i < len; i++) {
        if (time >= (start = range.start(i)) && time <= (end = range.end(i))) {
            index = i;
            break;
        }
    }
    return [index, start, end];
};


CSS:
.player {
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 900px;
    min-width: 320px;
}
.mediaplayer {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}