9x16.js

Did you forget to shoot that video in portrait-mode?

Download .zip Download .tar.gz View on GitHub

It's a fact.

When you lie down on your bed, you are horizontal.
When you stand up, you are vertical.

Trees, skyscrapers, soda cans, tables, chairs, candles, lamps, flag poles, chimneys, piano-key neckties, and giraffes are all vertical.

And now, those widescreen videos on your website can be vertical, too.


What is 9x16.js?

A simple jQuery library that overlays every HTML5 <video></video> element on your webpage with gorgeous vertical letterboxing.

Easily make your videos look as if they were shot by some schmuck on a cell phone!


How to use:

First, if your webpage doesn't currently have jQuery included, go ahead and add the following snippet of code to your <head></head> section.

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Then, copy and paste this line of code beneath jQuery:

<script src="http://dannydelott.github.io/9x16/javascripts/9x16.js"></script>

You can prevent a video from being letterboxed by adding any of these classes:

.no-please-no
.not-me-please
.oh-spare-me

Once your page loads, all of your HTML5 videos will be vertically letterboxed!


See it in action!

Before...




After.



Final thoughts:

9x16.js was inspired by the Vertical Video Syndrome PSA.