Skip to content
jQuery Plugin for Fluid Video
ActionScript JavaScript
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.