We have designed and built many websites with a background video playing on the homepage. It’s a modern trend and a powerful, eye-grabbing visual asset. Video conveys movement and momentum, and sets a more dynamic mood than a static image. It engages users in an immersive experience as soon as they land on the page. We've featured a transparent top navigation over some homepage background videos.
OHM Advisors is our most recent launch, featuring a homepage video hosted on Vimeo. Before that, we launched HDR, with a homepage video hosted on on YouTube.
We usually set background videos to autoplay with no audio and no controls, creating an immediate window into the company’s industry and services. It’s a moving tapestry that's much more than a pretty background.
Where to host video?
There are two main services we use for video hosting. We collaborate with each client to decide which hosting service is best for the project.
Vimeo (paid account)
We strongly recommend going with a paid Vimeo account for several reasons. With a paid account, there is no YouTube watermark overlaying the video. You can also use custom branded controls on videos throughout the site.
YouTube (free)
YouTube is the most popular hosting for video. It’s free, widely used, and easy to setup and manage. It does have one drawback, however. The YouTube branding watermark appears in the upper right, left, and lower-left corners, conflicting with and disrupting transparent top navigations. The watermark appears on initial load, at the end of the loop, and on reload.
We do have some workarounds for this situation. One way we deal with it is to enlarge the video api frame and offset the window by 50 pixels all around.
Video sizing for optimal performance
It's important to size videos properly so that they display and perform well on your site. We use a 16:9 aspect ratio in our design comps to show the video at the standard size (1920x1080). This ratio can be tailored to a leaner window.
Videos with animation and text
To display crisp text for improved readability, you may want to increase video resolution. In this scenario, you will need to produce a HD video, and change the display to high resolution in the video hosting settings.
What happens in responsive?
We design for video to go edge to edge on desktop and scale down until final breakpoint for mobile. Aspect ratio can change to 4:3 for a more full-screen, mobile experience.
Do you use background videos? What issues have you come across?
