Placing Videos for Startup Website Success

Video has become an integral part of most successful online marketing strategies. But what’s the best way to place that video on your startup website? Let’s consider four video placement strategies and explore the pros and cons of each.

1. The Autoplay Hero Video

A hero image is that large picture — usually overlaid with a snappy phrase or a call to action — at the top of a lot of modern websites. Uber’s website, for example, shows a smiling driver with a happy passenger in the back seat. These are the “heroes” of Uber’s site.

Actually, the term “hero image” predates the web. Many early ads featured hero images above extensive text describing the product being offered. In some ways, vintage ads look similar to landing pages of some modern websites. Here’s an example of a vintage ad for “Resinol Soap for the skin and complexion”:

As you can see, that lady’s a hero! Image in the public domain, hosted on viintage.com.

And here’s a great example of an 1889 ad for a Milburn electric car. You read that right — electric cars are not a new idea! The first electric cars went on the market even before Henry Ford’s Model T rolled off the assembly line. Admittedly, they did differ a bit from Musk’s thrill-inducing Tesla models.

Image in the public domain, hosted on viintage.com.

Outside of the wizarding world of Harry Potter, our print magazine advertisements are still limited to static images. But on the web, in place of a static image, some sites have adopted videos that automatically play. The company FiftyThree, makers of the Paper app for iOS, take advantage of this wizarding magic on their startup’s landing page. Take a look.

There’s no audio, but this short video in the hero section of Fifty Three’s website very quickly shows us what their app is all about. I’ll admit, it got me hooked until I realized it’s only for iOS (yeah yeah, I’m an Android fan).

While hero videos can be really effective — and certainly catch your attention — they do have a definite downside. Video is data-heavy, and a video background that autoplays may cause a site to load more slowly than it would with a static image. In fact, a quick test of this site on webpagetest.org reveals that the FiftyThree landing page clocks in at nearly 13 MB by the time it’s fully loaded. That’s pretty heavy for a modern landing page, and may cause excessive load times on some slower connections (in my webpagetest.org test it took around 6.5 seconds for the site to load). Perhaps more significantly, 13MB can be costly for those browsing on mobile data networks. Even Amazon’s desktop site, which has a lot going on, clocks in at just over 6 MB when fully loaded.

All the same, a hero video can be catchy. It can show off your product more quickly than any alternative video placement option. All things considered, I like FiftyThree’s site design.

2. The Fullscreen Pop-up Video

Another elegant way to place video on your startup’s site is to offer a call to action that launches a full-screen video experience. This is exactly what the Simple banking service does. Click on the play button in the middle of the hero image on their landing page and you’ll be launched right into a full-screen engagement story. Though this is a promotional video for a banking app, it’s important to note that they tell a human story: “Choose Simple, we’ll help you budget for the ring!”

Choosing a fullscreen pop-up video can be a great choice if you’re looking to cut down on the initial load time for your site, but you still want to offer a seamless video experience. Featuring a full-page video also increases the odds of visitors watching to the end and not getting distracted by another call to action or graphics on your site.

Of course, the downside of a fullscreen pop-up video is that a visitor will only ever see it if they click. With a background video on autoplay or even an embedded video player, a visitor will catch at least a glimpse of your video — hopefully enough to get them hooked. In short, if you’re going to rely on a fullscreen pop-up, you better design a button that screams “CLICK ME!” (but not literally, and certainly without all caps!) The last thing you want is a stellar video hidden behind a dull call-to-action button.

Your call-to-action button should be irresistible like this cat.

3. The Floating Pop-up Video

If you don’t want to go full-screen , you can always offer the old standby, the floating pop-up video. This is the approach of Box, an enterprise-level content sharing platform, and New Relic, a software analytics company.

Box’s site has a page filled with videos in three categories: “Box From A to Z,” “Focus on Features,” and “Customer Stories.” When you click on a video, a floating window appears and the page behind the popup is dimmed, drawing your focus only onto the new popup window (think Lightbox).

A floating pop-up video window hovers against the background of your website.

In Box’s case, the videos that pop up are embedded from YouTube, and so when the window first pops up you notice the YouTube logo in the lower right corner of the player along with the well-known YouTube buttons, including share and watch later. Personally, I’m not too keen on the YouTube embedding approach, but I’ll consider some pros and cons of local hosting vs. video services in the last section of this article.

New Relic places one simple call to action on top of their hero image — “Learn How” — underneath a hard-to-miss play icon. Clicking this button launches a floating video player like with Box, only New Relic’s video is not embedded from YouTube. This amounts to a cleaner viewing experience. No third-party branding is visible, and the player controls are kept as minimal as possible: play/pause, playback status, volume, fullscreen, and “X” to close.

Unlike Box, however, New Relic’s site doesn’t dim all of their page when you launch the video player window. The top navigation bar, including “Log In” and Sign Up,“ as well as the ”Chat With Us” window in the lower-left remain fully opaque while the video plays.

4. The Embedded, Stationary Video Player

Embedded videos with classic video player frames are still common practice on news sites such as The New York Times and the BBC, though I haven’t noticed them so much on modern startup websites. This is probably a good thing.

In-line video players are better when you want to provide lots of context around your video — for example, a short clip within a news story. But showing off what your product or service does on your startup’s website is much more like a 30-second TV ad than investigative journalism. In-line video players don’t give a particularly immersive experience.

Rating Video Placement Options

Let’s attempt some basic ratings to compare these four video placement strategies.

Our ranking system is: Poor —> Good —> Best.

Local Hosting vs. YouTube/Vimeo Hosting

We should take a moment, before we close, to consider the advantages and disadvatages of hosting your videos on your own servers vs. hosting them on video sharing sites like YouTube and Vimeo.

It’s easiest to visualize this in a table:

Conclusion

It takes a lot of effort to produce a worthwhile video to showcase your startup’s product or service offerings. Make sure to give it the respect it deserves by carefully considering how you showcase it on your site.

The ratings above can’t predict exactly how visitors to your startup website will react to a particular approach, but they do indicate that all four approaches can be successful in the right context. Proper A/B testing is the only way to get definite data about how your specific target audience responds.