Responsively resize SublimeVideo with jQuery
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

SublimeVideo jQuery Responsive Design


Responsively resize SublimeVideo, a cloud-based HTML5 video player that provides with full-screen playback and scrubbing controls, with jQuery.


Clone git repo git clone git:// or Download it


Function sublimeResize(); will responsively resize your Sublime video as your browser window is resized. By default, the element id="sublime" (html5 video element with class="sublime") is targeted. The width is then determined by the width of element id="wrapper".


<script src=""></script>

YOURTOKEN should be replaced with the token provided for your site from your SublimeVideo account.

var sublimeAspect=1.7777778;

For widescreen videos, the value of variable sublimeAspect should be 1.7777778 (16/9) For standard videos, the value of variable sublimeAspect should be 1.3333333 (4/3) You can calculate your own aspect ratio by width/height of your video.

For Playlist

var sublimeWidthObj="#playlist1";

sublimeWidthObj should be set as a jQuery-like selector of the object you'd like the video to resize itself to have the width of.


If the ID of the object is 'wrapper', var sublimeWidthObj="#wrapper"

If the class of the object is 'wrapper', var sublimeWidthObj=".wrapper"

If everything is properly set, your video should beautifully resize responsively.


Feel free to contribute.


Licensed under the MIT.

Copyright (c) 2012 Jonathan Suh | @jonsuh