In April 2017, Redditors made a compelling argument against blurred pillarboxing. The primary complaint of this approach is that it increases the file size, which poses a challenge for mobile devices where data is scarce and expensive, thereby increasing the load time. Additionally, pillarboxing makes the video smaller and difficult to see.
Vertical video presented in any widescreen medium experience similar issues. When viewed on a laptop or desktop (typically 8:5), vertical video embedded in a web page alongside content may either look too small or push content far down the page. In the most dramatic examples (where a vertical video “covers” the screen, nearly 65% of the video will remain unseen.
History
This technique was popularized by television news where vertical video is routinely edited in with widescreen 16:9 video. Maintaining a consistent aspect ratio throughout the program has a more professional feel and can prevent some televisions from stretching the video to fill the screen (which might happen when videos are framed by black bars).
Today, more than half of YouTube views come from mobile devices, while globally, 65% of Facebook video views occur on mobile.. According to Cisco, mobile video traffic accounted for 60 percent of total mobile data traffic in 2016. Cisco also predicts over three-fourths (78 percent) of the world’s mobile data traffic will be video by 2021. Because people naturally hold their phones in “portrait orientation”, more photos and videos are inevitably being produced in portrait. Likewise, more content is being produced to target these audiences.
Complaints
The internet loves to complain about the use of vertical video, particularity when it comes to blurred pillarboxing, and rightly so.
By adding that blurry border … the image size [increased] by 16/9*16/9, or a factor of 3.16 … because image compression of large blurry areas is rather efficient, the file size is probably about doubled. Which uses twice as much data for mobile users (and makes it load half as fast).
Also, it makes it impossible to see the video clip full size on cellphones, decreasing the size to 1/3 its original size.
In summary, you’ve doubled the file size, doubled the loading time, and shrunk the image size to 1/3. I’m so glad I see this all the time now.
Additionally:
Not to mention the it ruins the auto crop when viewing the video on a phone.
The topic has even spawned a number of parody videos, including: Vertical Video Syndrome - A PSA, Turn Your Phone!, and Turn Your Phone 90 Degrees.
This “issue” is so pervasive that apps like Horizon Camera have been developed to attempt to resolve the “problem”.
Biology
Perhaps unsurprisingly, humans experience the world in “widescreen”. According to a study conducted by NASA, human vision crops to around a 16:10 aspect ratio.
This diagram shows the normal field of view of a pair of human eyes. The central white portion represents the region seen by both eyes. The gray portions, right and left, represent the regions seen by the right and left eyes, respectively. The cut-off by the brows, cheeks, and nose is shown by the black area. Head and eyes are motionless in this case.
– Source: Ruch and Fulton, eds. [25].
In addition to our physical facial features which obstruct our vision, humans have a natural blind spot in each eye due to lack of receptors (rods or cones) where the optic nerve and blood vessels leave the eye. This can be visualized with the following demonstration:
Close your right eye, focus on the black dot, and slowly move your eyes closer to the screen until the cross disappears.
Our brain compensates for these blind spots by “filling in” missing visual information with the surrounding content to create a complete picture of our environment. This is a demonstration of our brain’s natural tendency towards creating uniformity in our environment. Marte Otten, psychology researcher at the University of Amsterdam and lead author of research on the uniformity illusion states that “under some circumstances, a large part of the periphery may become a visual illusion. This effect seems to hold for many basic visual features, indicating that this ‘filling in’ is a general, and fundamental, perceptual mechanism” … “which gives rise to a rich, but illusory, experience of peripheral vision.” While this research was limited to specific tests of the periphery, it is not such a stretch to believe that framing vertical videos with blurred areas makes for a more immersive experience.
An example of the uniformity illusion applied to blurriness can be seen in the following demonstration:
See the Pen Uniformity Illusion Blur by Joey Hoer (joeyhoer).
This shows that at worst, blurred pillarboxing provides a more immersive viewing experience, and at best, blurred pillarboxing provides a more comfortable viewing experience by reducing eye stain and cognitive load.
A Solution
Vertical videos are poorly suited to wide screens, while widescreen videos are poorly suited to the “tall” screens found on mobile devices. A true responsive video solution would provide an optimal experience in both environments. We need a solution that does not add weight, that does not make videos too small or too large.
Fortunately, JavaScript and canvas allow us to crate blurred pillarboxing in realtime, using the original video source; that means no unnecessary data over the wire. Additionally, because we can “paint” pixels on the canvas however we choose, we have the ability to create a truly responsive viewing experience that is wide for devices in landscape orientation (like laptops), and tall for devices in portrait orientation.
The following demonstration uses a small amount of JavaScript to create an optimal viewing experience for vertical videos on all devices:
See the Pen Vertical Video Bars by Joey Hoer (joeyhoer).
Tip: Always constrain embedded media to the height of the viewport in CSS using vh units (e.g. max-height: 100vh), leaving “padding” between the media and the viewport using calc().