Vertical Video: Current State of the Art

Introduction

There has been lots of noise recently about who does Vertical Video best. To help understand this I created two 20 second "trailers" from "Rabbitwinks," Walrus & Carpenter's latest project. Rabbitwinks is the WIP sequel to our feature length vertical video Alicewinks (2012).

These files were created in 9x16 HD aspect ratio at 720P, that is: 720 pixels wide and 1280 pixels tall. They were encoded into mp4 files using the H.264 codec (AAC) Level 4.1 Main Profile (CABAC, 3 reference frames), 29.970 fps, at approximately 1.5Mbs using Adobe Premiere Pro CC (2015).

Here are links to open the raw mp4 files in a new tab/window of your browser: "RW20seconds_1.mp4" and "RW20seconds_2.mp4". The files are also available for public download at dropbox, here and here.

HTML5 video tag

The videos in this section are embeded in the html using the <video> tag. The "controls" are enabled (to start/stop the video, fullscreen it, etc.) The width is set at 540, (half the height of a 1080p HD display). This size is a reasonable tradeoff between a desktop and mobile device. The source files are the same ones as in the previous section.

Twitter

Twitter's embed coding treats vertical videos properly, it does not trap them in a horizontal container. The videos are embedded here using Twitter's original embeding code.

Here is one video embedded using the code from Twitter:

And here is the associated links to Twitter web versions: pic.twitter.com/5Ct3k8Dmpd

— David Neal (@WalrusWinks) August 22, 2015

and here is the other:

And here is the associated links to Twitter web versions: pic.twitter.com/khdVJ2W3z1

— David Neal (@WalrusWinks) August 22, 2015

YouTube

Here is the first video after being uploaded to YouTube. It is embeded here using the default code provided by YouTube, i.e. the <iframe> tag.

Of course, this looks better if you tailor the default legacy horizontal frame to remove most of the ugly black bars. Here I used width="540" and height="960" 1/2x1/2 the size of 1080p.

Here is the link to the video at the YouTube site.

Here is the second video link at the YouTube site.

Vimeo

Vimeo creates code for both embedding and linking of files that are uploaded there. Here is one clip with the default embed code provided by Vimeo:

As in YouTube, the default <iframe> is designed for a horizontal video. This can be fixed, in this case setting width="540" and height="960":

Here is a link to this video on the Vimeo site

Here is a link to this video on the Vimeo site

Facebook

For the longest time, Facebook did not support video embed. It was reported in spring 2015 that they had started. Their embed coding is not a simple iframe, but rather a complicated javascript. You can get the details about using it on their developer site. Additionally, the support for vertical videos is very odd. On my desktop with a chrome browser, the video is housed in a vertical frame without pillorboxing. However, when I fullscreen the vertical video on desktop, it does a weird center crop. However, on all the mobile devices I have tried (Android/Chrome, iPad/safari, Kindle Fire/Silk) it creates a pillorboxed widescreen video window that does go fullscreen on the devices, albeit with a strange player and no controls.

Here is one of my videos, see for yourself:

Rabbitwinks 20 sec.

You should also be able to find it on the "forAlicewinks" video timeline inside Facebook.

Instagram

In late August 2015, Instagram added support for horizontal and vertical video, rather than square. The vertical is limited to 3x4 (0.75) aspect ratio, rather than 9x16 which is the norm for vertical video. Here is the Instagram Embed:

Rabbitwinks teaser cropped by Instagram both time and space

A video posted by David Neal (@walruswinks) on

And here is the link.

Snapchat

Although Snapchat has made a lot of noise in the press about Vertical Video and how important it is, their app did not support uploading of finished videos until July 2016 with their so-called "Memories" update. They still do not support a browser embed or view for user videos. (They will sometimes put a video clip from their "Live Stories" or "Discover" sections on their website snapchat.com for a limited time, as in the app.)

Here is a screenshot of a clip from Alicewinks that I uploaded to Snapchat:

As you can see, the video is shown inside an annoying white frame that takes up 40% of the screen space.

Any user video inside the app is implemented in 10-second cuts (which they call "snaps"), including any uploaded video. Another limitation of Snapchat is that all postings disappear after 24 hours. There is archival type storage, but you have to repost to your "my story" daily.

In addition to the silly 10 second cuts, Snapchat does not have any support for conventional video controls such as pause/play buttons or a footage positioning slider. All other video systems I have used have such controls. (Indeed, Snapchat has standard video controls in their "Discover" section.) The only "control" in Snapchat video is the ability to jump to the beginning of the next "snap" (10 sec. clip) by tapping.

Vervid

Vervid was a app for iOS that launched on July 22, 2015 to support the archiving of vertical videos. As of the middle of 2016 it appears to be defunct.

Slinger

The Slinger app for iOS was made generally available in January 2016. It was intended to be an archival app somewhat like Vervid. It was targeted to users of Snapchat to allow them to upload and store their videos. However, the app would accept any vertical video for upload, not just those from the Snapchat app.

Unfortunately, in late 2016 Slinger ceased to exist.

Vagaries of Vertical Video

One of the most common complaints about Vertical Video is the appearance of the unsightly black bars (pillor boxing) that often accompany them. As we saw above, this is often just the result of sloppy HTML coding. However, there is often another reason. In many cases, for whatever reason, a vertical video ends up packaged as a horizontal one. Sometimes this packaging is done on purpose, and in these cases the black bars are often replaced with a zoomed, blurred version of the video, or some other padding. There is even a group that will put advertising on the sides and donate proceeds to charity.

For example, this video of the explosion of a West Texas fertilizer plant, that was featured in Miriam Ross's video essay is the original vertical video.

You can view it on YouTube here. If you look at "stats for nerds" you will see that it is 279x480 pixels, and the view count is about 162K.

The version of this video that has 24 million views is this one.

If you look at it's "stats for nerds" you will see that it is 854x480, a horizontal packaging. The black bars are baked in! If we try to put this in a vertical video frame with an "iframe" tag, we do not remove the pillorboxing, we just add letterboxing.

Here is an example of a vertical video that has been "professionally" reframed for viewing on television by zooming and blurring the video in the margins:

(2 million views on YouTube plus millions on the Ellen show) and here is the original:

which has 23 million views.

Vertical Video Retrospective

I have put together a sample of many of the most interesting vertical videos of the last 10 years in this retrospective.

Vertical Video Papers (with Miriam Ruth Ross)

If you have read this far, you are probably really interested in Vertical Video! For the last several years, Miriam Ross and I have been following the trends in vertical video. We have documented that work in the following papers. Also be sure to watch Miriam's wonderful video essay about vertical framing.

Vertical Media documents the workshop held in Nov. 2013 at Victoria University of Wellington.

Vertical Film 2014 describes the state of vertical filmmaking in 2014.

Vertical 2015 summarizes vertical video related news and views in 2015.

Vertical 2016 is a summary of vertical video related events happening in 2016.

Return to Dave Neal's Home Page

This file was first uploaded on July 27, 2015.

This file was last revised on November 22, 2016.