Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery Plugin for Fluid Video
branch: master

This branch is even with johnpolacek:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
img
js
swf
vid
vidobject_source
README.md
index.html

README.md

Responsive Video

jQuery Plugin for a video player that scales to fit its container

How to Use

Add video element to your html inside a container div that is styled to scale with the size of the browser window

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

First, link to jQuery and then to vidobject.js. Next, create a new vidobject and apply any custom settings to it. Last, use vidobject to target the video element(s) on the page.

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="js/vidobject.js"></script>
<script>
    var vidobject = new $.vidobject({
        player: 'swf/vidobject.swf',
        buttonColor: '#FFFFFF',
        accentColor: '#BBBBBB',
        backgroundColor: '#111111',
        scaleVideo: true,
        fullScreen: true
    });
    vidobject.embed("myVideo");
</script>

Parameters are:

player: path to the vidobject.swf player buttonColor: video controls button color (default is '#FFFFFF') accentColor: video controls accent color (default is '#BBBBBB') backgroundColor: video controls background color (default is '#111111') scaleVideo: set to false if you don't want the video to scale
fullScreen: set to false to disable full screen mode

Responsive Video Object created by John Polacek
Twitter: http://twitter.com/#!/johnpolacek
Blog: http://johnpolacek.com

Something went wrong with that request. Please try again.