THE QUICK GUIDE FOR

Optimizing Video for the Web

Optimization • Best Practices • Uses Optimizing Video for the Web

Introduction Creating and using video on your website allows viewers to make a stronger connection with your institution. Videos let you show your audience who you are and what sets you apart, rather than just telling them. To help you better understand how video can be used, we’ve created this guide to explain some methods and best practices for posting videos online.

Optimization As with images, it is important to make sure videos are optimized for web use. Video fles are much larger than images, so optimizing them can pay even bigger dividends. A one-minute high defnition video can weigh in at around 200 megabytes in size — that’s far too unwieldy for sending and receiving on the web (200 MB is 1/5th of a gigabyte; many mobile device users purchase data allotments in GB, so that video would represent 1/5th of a mobile device user’s total monthly cellular data allowance!) Optimizing your videos not only allows for faster loading times, but streamlining the delivery of content to end users means that your website will perform better overall.

High to Low When preparing a video for the web, start with the highest quality source fle and downscale the video to the desired resolution. “Upscaling” video – starting with a low-resolution fle and ‘stretching’ it for display on a site page – can result in undesirable results.

A great way to think about what upscaling can do to video is to approach it like painting a room. Imagine you have just enough paint to cover a 20’x20’ room. You could easily paint a 15’x15’ room, because you’ll have more than enough paint. If you tried to paint a room that’s 24’x24’ however, you’d end up with some gaps. Upscaling video is like trying to cover a wall without having enough paint. When upscaling, video- editing software will try to ‘fll in the gaps’ with pixilated sections, color washes, and other visual artifacts that distract the viewer from the video’s message.

The two screenshots below are from the same video; the one on the left has been downscaled from a high- resolution (1080p) source fle; the one on the right has been upscaled from a low-resolution (480p) source. You can see that the fower on the right is blockier on the edges of the petals (pixilated), and has large areas of a single color (color washing) rather than transitioning smoothly between many similar shades.

1080P video downscaled to 720P 480P video upscaled to 720P Using Video on Your Site

From social media sharing via YouTube to videos you create and upload yourself and anything in between, you have plenty of options on how to enhance your story with video content. In this section you learn about two common options for displaying video.

Embedded Video “Embedding” video refers to displaying video within a web page and alongside text or other content, rather than linking of to a separate video page or tab. Below are examples of embedded videos from Finalsite’s Media Manager and YouTube.videos from Finalsite’s Media Manager and YouTube.

Embedded video via Media Manager Embedded video via YouTube

YouTube and Vimeo Both YouTube and Vimeo make it easy to embed videos uploaded to their sites on your own site’s pages. In either case, fnd the “embed code” associated with a specifc YouTube or Vimeo video, and then paste that code into your site in the appropriate location (be sure to use an Embed element, or open up the HTML viewer in your site editor before you paste the embed code!)

We recommend that you follow the best practices provided by your preferred media provider. (You can use these reference links to YouTube’s and Vimeo’s current recommended video upload settings.)

Multimedia Manager Multimedia Manager is Finalsite’s image and video optimizer. When fles are uploaded to Media Manager, Media Manager sends an optimized version of that fle to the user based on the device and connection speed the user is viewing your site on.

Recommended Video Upload Settings for Multimedia Manager Format: MP4 Frame rate: 30 fps Video size: 1080P Key frames: 90fps Video bitrate: 2500 Kbps Duration: 5 Minutes or less Audio bitrate: 128 Kbps Hero/Background Videos “Hero” or “background” videos refer to short, repeating video clips that play in the background of a web page. Due to the size of video fles, we recommend that you keep the length of these clips to around 10-20 seconds, with no audio. (Please note only desktop web browsers that support HTML5 can display videos as background elements. Videos will not play on mobile devices such as iPads, and other mobile devices due to limited HTML5 support of mobile web browsers.)

Hero video located at the top of a homepage design

Background video used on a homepage design

Recommend video settings for hero/background videos Video size: 1080P Video bitrate: 2500 Kbps Frame rate: 30 fps or 24fps Key frames: None Duration: 20-90 seconds Audio: None Format: MP4 HTML5 Video HTML5 is becoming the new standard for displaying video on a webpage without the need for end users to install special browser plug-ins such as Adobe Flash. The Multimedia Manager video player uses HTML5, as do YouTube, Vimeo, and many other dedicated web video services. Compared to older playback technologies like Flash, HTML5 ofers improvements in speed, video quality, and fexibility (HTML5 players are responsive for instance, meaning you can use them to deliver videos on both mobile and full-size platforms without any additional modifcations.)

Currently, the .MP4 fle format is the only one that’s universally supported by HTML5-compatible browsers, so we recommend using that when uploading any videos that you create yourself.