Skip to content

johnpolacek/SimpleVid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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

About

jQuery Plugin for Fluid Video

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published