Homepage hero videos — they are "all the rage" in web design right now. Although some early adopters took to the trend in late 2013 (including us!), almost every school we've worked with in 2016 has invested time and efforts into creating a video for their homepage hero image, whether it was purchasing a drone, hiring a pro, or spending hours crafting the perfect sequence of footage to capture website visitors.
Do me a quick favor, and compare these two photos of my dog, Scout:
You can tell the difference, right? There's a clear difference between the color, clarity, lighting, and depth of field. (And hey, even attire and stature.)
Because embedded videos on school homepages are becoming so common (like photos), the same comparison can easily be made from website to website. It's easy to tell the difference between an awesome, professionally produced one (like Thayer Academy's — I could still watch it all day), and those that are not.
Having an embedded video on your website's homepage doesn't automatically make your site more engaging than if it had photos. A video provides you with the opportunity to tell a real story — not to just have a video montage of the same campus activities you could have taken pictures of.
Really — I promise you, the video of the student painting isn't any more interesting than the photo of it.
With all that being said, video is still huge in web design, and isn't going anywhere in 2017. And there are plenty of ways to use it on your website to improve engagement, site speed, and even cut down on production costs.
The Quick Guide for Optimizing Video for the Web
1. Add drone footage to your footer
We can't deny two key things: First, drone footage is really, really cool (especially if you have an awesome campus to show off); and second, calls-to-action are the most important part of your home page because they drive conversions (AKA, inquiries, donations, etc.)
So — why not combine the two? Canterbury School in Milford, CT added embedded drone footage to their footer, behind their three prominent calls-to-action: Inquire, Visit, and Apply.
Rather than encouraging website visitors to spend the bulk of their visit at the top of the page, they entice them to spend time at the bottom, where the paths to conversion are.
And because the footer video is simply drone footage, it doesn't detract from the messaging.
2. Use embedded video for a parallax scroll effect
If you don't want to wait to expose your users to video until the footer, you can add it...well, pretty much anywhere.
The Lovett School uses embedded video as a panel on their homepage, which is a nice way to break up the typical panel design look.
3. Use it as a cool hover effect
When Lakeside School met with their designer, they said they wanted "more video" on their website — but that didn't mean on the homepage. The school had the equipment, skills, and time to create a variety short videos for their Student Experience page.
These short videos are fun and effective because for a few, key reasons:
- The hover effect is an unexpected feature (or a design treat, as I like to call it!) — something different that excites and engages the user
- Since the videos are about a single topic, it doesn't feel like a video montage of random school events — they were each created with a specific intent and can be re-purposed elsewhere if needed
- Since they're short, website visitors are more likely to hover over each one and watch the quick video about what they're interested in
Although the team at Lakeside School had the equipment and skills to product these videos, their brevity and simplicity is something that could easily be re-created by schools without a huge budget for video.
Another example of using video in a hover effect comes from School of the Holy Child's homepage — where their primary calls to action turn to a video on hover. Similar to Lakeside, this short video with minimal necessary production makes it easy to incorporate!
Still want to have an embedded homepage hero video?
That's okay, too! Here are a few tips for making yours stand out:
- Tell a story: Avoid the video montage feel, and try and tell a story from start to finish
- Use it as a teaser: Some of the most effective embedded homepage videos are those that prompt website visitors to watch their actual video in full — such as Holton-Arms School and The Hotchkiss School.
- Keep the clips short and sweet: Each clip in your video shouldn't be longer than 5 seconds
- In general, keep the video short: It's hard to keep users engaged for longer than 30 seconds without audio
- Offer photos, too: More schools — like Episcopal Collegiate School — are opting for a photo-video hybrid slideshow that allows them to have shorter, more targeted videos, mixed with high-quality photos.
- Hire a professional videographer: While photographers and videographers have plenty in common, most photographers can't produce a "story" the way a videographer can
ABOUT THE AUTHOR
As Finalsite's Content Marketing Manager, Mia plans and executes a variety of inbound marketing and digital content strategies. As a former TV and news reporter, freelance cinematographer and certified inbound marketer, Mia specializes in helping schools find new ways to share their stories online through web design, social media, copywriting, photography and videography. She is the author of numerous blogs, and Finalsite's popular eBook, The Website Redesign Playbook.