Making SublimeVideo Fluid Width

Chris Coyier //

Since v9 of this site, I've been using SublimeVideo for the video player in the screencasts area. SublimeVideo is similar to projects like VideoJS and MediaElement.js in that it's a polyfill for HTML5 video. That is, you use regular ol' clean HTML5 <video> markup and it takes care of making sure that video can be seen on as many browser/platform/versions as possible.

How does SublimeVideo differ from those other projects?

  • They host the resources, not you. That means some bandwidth savings, but more importantly, means that you're always getting the latest and greatest version which is important in this fast-changing browser landscape.
  • It's the nicest design of all of them. Subjective, I suppose.
  • It's not free. While the others are.

I quite like the idea of paying for services that make our lives as front end developers easier, so I hopped on board (I pay for the service on the Star plan).

Do note that SublimeVideo is for video that you host yourself somewhere. They don't host video for you. If you want hosted video and a player that similarly works everywhere without worrying about bandwidth, you should probably just use YouTube, Vimeo or Blip.tv.

Using SublimeVideo regularly, you simply load their JavaScript in the <head>:

<script src="//cdn.sublimevideo.net/js/YOURTOKEN.js"></script>

Then use HTML5 video like this:

<video class="sublime" width="640" height="360" poster="video-poster.jpg" preload="none">
  <source src="//yoursite.com/video.mp4" />
  <source src="//yoursite.com/video.webm" />
</video>

This works great, but the resulting video player is of a static width and height. In a fluid width / responsive site like I have here media of fixed dimensions don't play well. I'd much rather the video shrink and grow with the column that it's inside of as needed.

I've tackled the idea of fluid width video a number of times around here. Ultimately I helped with FitVids.js, a jQuery plugin for easily making videos from all the most popular sources work in fluid width designs. Unfortunately FitVids.js doesn't work with SublimeVideo. For lack of a better explanation, they are just different beasts and making them work together would be more trouble than it's worth.

Good news though, after a bit of pleading (I'm sure they had lots of requests for this) they released a new bit of API specifically for resizing. So making the video fluid width is as easy as watching for the window.resize event, and when that fires, calculate the new width and height and use the sublimevideo.resize function to change it.

This is the full code I use. There is a few extra bonus bits in there explained via code comments. Note this uses a bit of jQuery. Also note the "sublime" class on the <video> element is removed.

<video id="the-video" width="570" height="320" poster="poster.jpg" controls preload="none">
  ...
</video>

<script>
(function() {

  // Prevents some flickering
  $('#the-video').css("visibility", "hidden");

  // Fluid column video is inside of
  var fluidParent = $(".main-column"),
  newWidth, newHeight;

  // Gets called when video needs resizing
  function resizeVideo() {
    newWidth = fluidParent.width();
    // 1.78125 == Aspect Ratio of my videos
    sublimevideo.resize('the-video', newWidth, newWidth/1.78125);
  };

  $(window).resize(function() {
    resizeVideo();
  });

  // When the resources are ready, 
  // load up the video and size it correctly
  sublimevideo.ready(function() {
    sublimevideo.prepare('the-video');
    resizeVideo();
  });

  }());
</script>

If you'd like to see it in action you can see it on single video pages.