Grow your CSS skills. Land your dream job.

Making SublimeVideo Fluid Width

Published by 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="http://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="http://yoursite.com/video.mp4" />
  <source src="http://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.

Comments

  1. Andrea
    Permalink to comment#

    Just to let you know… it doesnt’ really work on my machine:

    Macbook PRO, Chrome 14, Dual monitor setup.

    When I go to this page:

    http://css-tricks.com/video-screencasts/101-lets-suck-at-github-together/

    the laptop screen flicks for a while… then I can hear the audio… but no video actually starts. :(

  2. gogo
    Permalink to comment#

    the video is a black screen with audio guys, come on…

  3. The fact you were seeing no video was because of this line in the code above which is hiding the video element:

    $(‘#the-video’).css(“visibility”, “hidden”)

    We have now deployed a new release of the SublimeVideo player that takes care of overriding the visibility property once the video is started.

  4. Hey Chris,

    I know you looked at this once, but don’t you think it could work without the need for $(window).resize() ?

    Creating Intrinsic Ratios for Video

    • Ideally it would do that. I’ll bring it up to them and see if it’s a possiblity. I think it’s good that they offer a resize method in their API though, and because that now exists, it means this technique works *right now* which is sweet.

  5. Hey Chris,

    For your presentations have you thought about using something to synchronise video and & slide decks?
    http://www.arcticfoxtv.com

    Its a monthly subscription but makes displaying your presentations a whole lot easier!

  6. Nick
    Permalink to comment#

    lol, $50 a month and they don’t even host the video?! Wow… uhhhh…. uhh.. no comment…

  7. Nick
    Permalink to comment#

    I noticed how much I didn’t like the css-tricks video player, it doesn’t go full screen when you switch to flash, which is annoying as hell. I probably wouldn’t pay $50 for something that seems inferior.

    • Dude you should totally make a free HTML5 video polyfill hosted service that has that feature. I’ll switch over to it if it’s just as fast, just as well designed, and you update it vigilantly.

  8. The binding this to window resize is definitely something you want to debounce

    http://benalman.com/projects/jquery-throttle-debounce-plugin/

  9. Craig
    Permalink to comment#

    I’m attempting find a video player that offers the power of using cue points, javascript controls, or even popcorn.js for some amazing integration.

    I’d like the video player to pull from YouTube for the SEO benefits (and free video hosting) yet still integrate nicely into a responsive site design using either FitVids.js or a similar API method you described here with the Sublime player.

    The JW Player may be this solution but I’m wondering if you would be willing to shed some light on making the FlowPlayer fluid width? http://flowplayer.org/demos/index.html

    That seems to hold the most promise! Thoughts?

  10. Kevin
    Permalink to comment#

    Am having trouble here figuring out where I’m going wrong in trying to get this to work. I’m using a theme that has fitvids built in (and have tried getting your tweak working with the fitvids.js enqueued and not). I have the SublimeVideo plugin installed and have tried embedding the video using their embed code tool (the SV player loads but doesn’t resize), as well as using the standard HTML5 embed code as you used in your example (can’t get the SV player to load at all). I believe that I’ve got your script set up correctly. Nothing I’ve tried so far, in various combinations, has worked in getting the video player to resize with my theme as the window size changes.

    One obvious difference I can see is that the version of jquery is different (my theme uses 1.6.1 as opposed to 1.7.1 that you’re using

    Any help would be much appreciated.

    Link to the dev page is: http://vancom.infectious.ca/solutions/

    Thanks in advance for any insight into this.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".