bootstrap media

by secretgspot

HTML

<article class="item">
        
            <header>
                <h1 class="title">Media Player</h1>
            </header>
            
            <div class="content clearfix"><p>Media Player is a HTML5 audio and video player completely built HTML and CSS. You can easily embed video files into your website by using the HTML5 video element. A Flash player fallback is included for all unsupported browsers.</p>

<h2>Features</h2>

<ul class="check">
    <li>Native playback for modern HTML5 browsers</li>
    <li>Supports MP4 (h.264), WebM, FLV, WMV and MP3 files</li>
    <li>Completely built with HTML and CSS</li>
    <li>Same UI in all browsers</li>
    <li>Create your own skins</li>
    <li>Flash player fallback for unsupported browsers</li>
</ul>

<h2>Examples</h2>

<div id="mep_0" class="mejs-container mejs-video" style="width: 640px; height: 360px; "><div class="mejs-inner"><div class="mejs-mediaelement"><video width="640" height="360" poster="http://www.yootheme.com/videos/mediaplayer.jpg" preload="none" src="http://www.yootheme.com/videos/mediaplayer.mp4">
    <source type="video/mp4" src="http://www.yootheme.com/videos/mediaplayer.mp4">
</video></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="width: 640px; height: 360px; "><img width="100%" height="100%" src="http://www.yootheme.com/videos/mediaplayer.jpg"></div><div class="mejs-overlay mejs-layer" style="display: none; width: 640px; height: 360px; "><div class="mejs-overlay-loading"><span></span></div></div><div class="mejs-overlay mejs-layer" style="display: none; width: 640px; height: 360px; "><div class="mejs-overlay-error"></div></div><div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 640px; height: 360px; "><div class="mejs-overlay-button"></div></div></div><div class="mejs-controls"><div class="mejs-button mejs-playpause-button mejs-play"><button type="button" aria-controls="mep_0" title="Play/Pause"></button></div><div class="mejs-time...

CSS

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after { content: ""; display: table;
}
.clearfix:after, .grid-block:after { clear: both
}
.grid-box { float: left
}
.width20 { width: 20%
}
.width25 { width: 25%
}
.width33 { width: 33.333%
}
.width50 { width: 50%
}
.wk-content>*:first-child { margin-top: 0
}
.wk-content>*:last-child { margin-bottom: 0
}
.wk-slideshow, .wk-slideshow
.slides { position: relative
}
.wk-slideshow .slides, .wk-slideshow
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideshow .slides>li { position: absolute
}
.wk-slideshow .nav
li { cursor: pointer
}
.wk-slideshow .nav
span { display: block
}
.wk-slideshow .next, .wk-slideshow
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideshow
.caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; background: rgba(0,0,0,0.5);
}
.wk-slideshow
.captions { display: none
}
.wk-slideshow .caption, .wk-slideshow .caption
a { color: #fff
}
.wk-slideshow .caption
a { text-decoration: underline
}
.wk-slideshow .wk-content > a:first-child, .wk-slideshow .wk-content > img:first-child, .wk-slideshow .wk-content>a:first-child>img { display: block
}
.wk-slideshow .slides > li > *, .wk-slideshow .slides>li>*>img { display: block
}
.wk-gallery
a { display: inline-block
}
.wk-gallery a>img:first-child { display: block
}
.wk-slideset
.sets { overflow: hidden
}
.wk-slideset .set, .wk-slideset
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideset
.set { display: none; position: relative; margin: 0 auto; text-align: center;
}
.wk-slideset .set:first-child { display: block
}
.wk-slideset .set>li { display: inline-block
}
.wk-slideset .nav
span { display: block; cursor: pointer;
}
.wk-slideset .next, .wk-slideset
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content>a:first-child>img { display:...

JavaScript

//MEDIA
var mejs = mejs || {};
mejs.version = "2.4.0";
mejs.meIndex = 0;
mejs.plugins = {
    silverlight: [{
        version: [3, 0],
        types: "video/mp4,video/m4v,video/mov,video/wmv,audio/wma,audio/m4a,audio/mp3,audio/wav,audio/mpeg".split(",")}],
    flash: [{
        version: [9, 0, 124],
        types: "video/mp4,video/m4v,video/mov,video/flv,video/x-flv,audio/flv,audio/x-flv,audio/mp3,audio/m4a,audio/mpeg".split(",")}],
    youtube: [{
        version: null,
        types: ["video/youtube"]}],
    vimeo: [{
        version: null,
        types: ["video/vimeo"]}]
};
mejs.Utility = {
    encodeUrl: function(b) {
        return encodeURIComponent(b)
    },
    escapeHTML: function(b) {
        return b.toString().split("&").join("&amp;").split("<").join("&lt;").split('"').join("&quot;")
    },
    absolutizeUrl: function(b) {
        var a = document.createElement("div");
        a.innerHTML = '<a href="' + this.escapeHTML(b) + '">x</a>';
        return a.firstChild.href
    },
    getScriptPath: function(b) {
        for (var a = 0, d, c = "", e = "", f, g = document.getElementsByTagName("script"); a < g.length; a++) {
            f = g[a].src;
            for (d = 0; d < b.length; d++) if (e = b[d], f.indexOf(e) > -1) {
                c = f.substring(0, f.indexOf(e));
                break
            }
            if (c !== "") break
        }
        return c
    },
    secondsToTimeCode: function(b, a, d, c) {
        typeof d == "undefined" ? d = !1 : typeof c == "undefined" && (c = 25);
        var e = Math.floor(b / 3600) % 24,
            f = Math.floor(b / 60) % 60,
            g = Math.floor(b % 60),
            b = Math.floor((b % 1 * c).toFixed(3));
        return (a || e > 0 ? (e < 10 ? "0" + e : e) + ":" : "") + (f < 10 ? "0" + f : f) + ":" + (g < 10 ? "0" + g : g) + (d ? ":" + (b < 10 ? "0" + b : b) : "")
    },
    timeCodeToSeconds: function(b, a, d, c) {
        typeof d == "undefined" ? d = !1 : typeof c == "undefined" && (c = 25);
...