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.