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.)
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" />
</video>
</div>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="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="js/simplevid.js"></script>
<script>
var simplevid = new $.simplevid({
player: 'swf/vidobject.swf',
buttonColor: '#FFFFFF',
accentColor: '#BBBBBB',
backgroundColor: '#111111',
scaleVideo: true,
fullScreen: true
});
simplevid.embed("myVideo");
</script>Parameters are:
Thanks to swfobject.js for some code, and Chris Coyier for inspiration.
Other stuff by me: johnpolacek.github.com
