Fork me on GitHub


by johnpolacek

jQuery Plugin for Fluid Video

Generally it is best to use services like YouTube, Vimeo or a CDN for hosting video, but sometimes it isn’t an option. SimpleVid is a free and easy way to host and embed your own fluid videos. It uses flash to for browsers that don’t support h.264, so you can encode once as a baseline h.264 mp4 and play anywhere.
(Try FitVids.js if your video is on YouTube, etc.)

How to Use

Add video to your html in a container div styled to scale as you like.

<div id="container">
    <video id="myVideo" width="640" height="360" poster="img/poster.jpg" controls>
        <source src="vid/video.mp4" type="video/mp4"  />

Link to jQuery and then simplevid.js. Then, initialize the plugin with the settings you want. Last, use the plugin to target video elements on the page.

<script src=""></script>
<script src="js/simplevid.js"></script>
    var simplevid = new $.simplevid({
        player: 'swf/vidobject.swf',
        buttonColor: '#FFFFFF',
        accentColor: '#BBBBBB',
        backgroundColor: '#111111',
        scaleVideo: true,
        fullScreen: true

Parameters are:

Download Plugin: zip tar

Thanks to swfobject.js for some code, and Chris Coyier for inspiration.

Other stuff by me: