Over the last eight years we’ve seen a number of video in email false starts with Certified Video, VideoGifs, base64 embedded video and even streaming JPEGs. After years of exploring hacks, I felt like we’d exhausted the subject. So a few years ago I decided to just wait it out, let HTML5 catch up making ‘real video’ freely accessible.
That wait appeared to be ending last year with many clients reporting 50% mobile usage. That’s not to say we’re blindly enthusiastic about HTML5, but using it on a few projects was enough to make me reassess the many video in email options out there.
Below are nine techniques covering the gamut from thumbnails right up to HTML5, there’s strong arguments in support of each of them. You’ll need to weigh up ease of implementation, target audience, your goals and cost before considering any of them.
On the minimal end just add a play icon over any still image to indicate it’s video content. You can get creative with how you brand the play button. YouTube has an official icon you can download here. Alternatively you can feature a video player, which if recognizable sets clear landing page expectations.
Ease of implementation ensures the still image linking to a landing page is the most widely used method of adding video to an email.
Pros: Easy, fast, cheap, lightweight, universal support and gets users straight to your website.
Cons: Lack of motion can make the video easy to overlook, only one still image to entice users, requires extra clicks to view the content on a landing page and not all websites are mobile friendly.
The Rukus implementation delivers a personalized still image in the email, which then links to a landing page where users can watch a personalized video. Like Wistia, Rukus CEO Christopher DiNicolas doesn’t advise playing the video natively in the email client.
“Firstly too few email clients support HTML5 video playback. Falling back to the Gif animation trick has a whole set of drawbacks including file size and the violation of an expected behavior,” DiNicolas told me. “Second, the personalized still image tactic we employ drives subscribers to a landing page where there is greater real-estate to communicate the value of a product, track a users behavior and deliver a compelling, branded experience.”
Pros: Ability to personalize the still image and subsequent video for each user, wow factor and increased sharing (see Zumba case study), technical burdens placed mostly on the landing page.
Cons: Need a vendor, more time and cost to implement than a basic still, risks being a bit gimmicky if not executed thoughtfully, and some iOS users will expect a one click video play rather than being dropped of on a landing page.
This technique is easy to implement, you just pick a small number of frames and cut between them. This bumbleandbumble email uses just four frames, while Nasty Gal uses twelve. In this horizontal email, American Eagle Outfitters demonstrates how eight frames of motion immediately draws the eye to the video content. 5yrs ago we ran a static vs. animated a/b and saw a 26% lift for the animated version which used six frames of video.
MailerLite just added a new feature that takes your YouTube, Vimeo or Wistia videos and automatically generates an animated Gif. Here’s one of their emails showing a 15 frame Gif. Ignas Rubezius, CEO of MailerLite, told me that the click rate for their own emails increased from the average 5% to 8% when including the animation. He also felt that animated Gifs were, “enough for now” as support for HTML5 playback is still low.
Pros: Movement draws the eye, broad support for animated Gifs, easier to implement than HTML5, multiple frames in which to demo a product or tell a story, doesn’t take much time or skill to create - simple tutorial - and fairly lightweight.
Cons: Not as polished as some other techniques, no audio, will add to the file weight if used across large areas and with too many frames, and only 1st frame shown in Outlook so it has to work as a standalone.
Developed by Jamie Beck and Kevin Burg in 2011, cinemagraphs are when an isolated element within the frame is animated on a loop. As their website states, “It’s more than a photo but not quite a video”. That first year Anthropologie and Columbia featured cinemagraphs in their emails, more recently Mr Porter ran a series.
Netflix sent a cinemagraph in an email to promote the second season of House of Cards, show creator Beau Willimon also shared teasers on the web. Experian stated that 72% of clients who’ve used animated Gif’s or cinemagraphs in email experience higher transaction-to-click rates. Seen as the classy person’s Gif, cinemagraphs can highlight a brands artistry. Although they do take extra skill to create, these delighters are often widely shared.
Pros: Show of your brands creativity, cover a larger area than a VideoGif, sweet spot between a photo and video, the inventors call them ‘living photographs’.
Cons: Takes more time and skill to create than some of the other techniques though there’s specialized software, file size for HOC was 1.6MB, no audio, Gif quality is sometimes poor, only first frame displayed in Outlook.
In Dec 2008 I wrote how to create a VideoGif, that same month Sears was the first retailer to send one, followed by REI in Feb. 2009. VideoGifs went on to have their heyday in 2011. Neiman Marcus, Kenneth Cole and World Market were among the brands to experiment that year.
Recently Redbox have been sending VideoGif trailers, though across larger areas and in less boxy designs than those early attempts. Quality and size have always been the downside of using VideoGifs, and Redbox are pushing both to the limit. The Hobbit example weighs in at 6.7 MB and you can clearly see compression artifacts. Though having the trailer play right in the email without technical hassles makes this an attractive compromise.
VideoGifs can also be used as fallbacks to HTML5, like this example by UGG. The UGG fallback Gif is 400px wide scaled up to 650px, 300 frames and 8.3MB. The Gif is viewed in clients such as desktop Gmail that don’t support HTML5. We did quite a few VideoGif campaigns back in the day and our software of choice was ProMotion.
Pros: Plays directly in the email which requires little effort from the user, delivering one Gif file keeps things simple as no need for fallbacks, easier to create than a cinemagraph or HTML5 and can show a 15-20 sec trailer.
Cons: No audio, poor image quality, large file weight (there’s a 10MB Gif limit for desktop Gmail). Historically this lead designers to contain them to small areas and 20 sec clips.
In 2010 we developed a solution that allowed us to stream JPEGs, here’s an in-depth write up. This isn’t like those early VideoGifs that were renamed JPEG, but the real deal. The benefits were superior 24bit image quality, and ~4x the resolution of a Gif for the same file weight. JPEG push was also dynamic, in this Sherlock demo the sub-titles and title top left are added in real-time. The Avatar demo features sub-titles, first name personalization and a countdown.
The downside was that JPEG push only ran in a limited number of clients - today its iOS, Mac Mail, Yahoo Mail (not IE), AOL (not IE), BBZ10, WP7.5 - before falling back to a dynamic Gif or still via device detection. We considered porting the tech to HTML5, but iOS usage in 2010 was ~6% so it wasn’t worthwhile.
Here’s a few more demos: James Bond, one of my favorites Alice In Wonderland and Avatar scaled up big for fun if you have lots of bandwidth. The tech has variable frame rate and compression built in, so the quality and smoothness will vary person to person, depending on your connection. We haven’t touched them in years so the fallbacks may need some adjustments, especially in Gmail were it used to play prior to image caching.
Pros: Better image quality and smaller file weight than a VideoGif, can cover larger areas than a VideoGif and play for longer such as a full 2-3min trailer, dynamic so you can insert live content on open and plays in the email not in a separate window like HTML5.
Cons: No audio, no player controls, bandwidth heavy though not as much as a Gif, JPEG push isn’t a known technique that’s easy to implement and requires fallbacks.
When you place a YouTube link in an email with link tracking disabled, you can play the video directly in desktop Gmail or Outlook.com. The video thumbnail appears above the email in Outlook.com and below in Gmail, when clicked the player overlays the creative.
I’ve seen few brands use this technique, in fact the only example I could find was Cabela’s from 2012, captured in Yahoo Mail (originally shared on the RetailEmailBlog). Although Yahoo recently posted about link previews, I couldn’t get my YouTube video to work in Yahoo Mail. I know it worked a few years back, no doubt I’m doing something stupid.
Click a thumbnail to launch the player as an overlay:
Pros: Can watch real video without leaving inbox, easy to implement, increase in viewing rates, falls back cleanly in other clients.
Cons: Only YouTube videos, might reduce website traffic, Outlook.com shows the video above the email which may distract from any offers underneath, no tracking beyond YouTube views.
UPDATE: iOS 8 has dropped support for video, hopefully its not permanent and gets fixed in a later release (8.1 still no support…).
HTML5 video support is predominately Mac Mail and iOS, so its only been worth implementing in the past couple of years as mobile usage has shot up to ~50%. Working with Chanel in collaboration with French agency chicmedialab, we developed this in-house HTML5 video solution last year.
Using media queries we switched between three experiences: desktop, iOS and non-iOS mobile. Outlook.com only plays on an obscure right click, so we coded it so that the play icon doesn’t appear, though it still display’s in other desktop clients like Gmail.
My French collaborators attended runway shows to record footage for the email campaigns. The videos were then edited in a way that gave just glimpses of the show, abstract teasers that encourage you to view the full event on the landing page. As the majority of people check mobile email in portrait, it was decided that the mobile video would also favor that vertical orientation.
Chanel were able to gather stats on these global campaigns and the feedback was that the videos performed very well. Though you might want to consider using a vendor for HTML5 video if you don’t have the resources to deal with analytics, hosting and QA. This email by Allen Edmunds uses Movable Ink technology, while this Barneys example uses Liveclicker.
Pros: Stunning and engaging where it works, supports audio, one click to watch the video vs. two if viewed on a landing page (Chad White reported that the ExactTarget Spark newsletter resulted in 3x the video views when using HTML5 vs. viewed on a landing page as viewing natively saves the user an extra click), acts as teaser to expanded website content, a stand-in if your website isn’t mobile optimized.
Cons: Upfront investment in QA for that first send, bit of extra time to implement even with a vendor, support is mostly Mac Mail and iOS, need fallbacks, you may want to drive users straight to your website, doesn’t play ‘in-email’ on the iPhone like VideoGifs and JPEG push but launches a separate application which you have to click again to return to the email.
In April 2014, Litmus sent this email which is the first I’ve seen that features HTML5 video as a background. Support is limited to Apple Mail and Outlook 2011 (Mac), but it degrades cleanly to a still image everywhere else.
It’s crucial to know which clients people are viewing your emails on when considering different video in email techniques. Litmus knew that 30% of their audience uses Apple Mail so the enhancement was worth it. You can read their HTML5 background video tutorial here.
Pros: Great enhancement where supported, clean fallbacks, couldn’t achieve the same effect with an animated Gif, in this case it bought the conference atmosphere and attendees - many recognizable to subscribers - into the inbox, experimental email techniques highlight your creativity and generates traffic and shares.
Cons: Support is limited to Apple Mail and Outlook 2011 (Mac), need in-house skill to implement and real devices to QA on.
No clear choice
While HTML5 is the closest we have to real video in email, I’d be more enthusiastic if it had wider support. I only recommend it where you have at least 50% coverage, though that’s quite a few of our clients these days.
The array of faked video techniques are still very much in use. Even video platforms like YouTube, Redbox and Netflix are currently using stills, VideoGifs and cinemagraphs in their emails. That’s not to say your video in email strategy should mirror theirs, but it does indicate that its early days for HTML5 video.
There’s also no reason to settle on just one approach. The team at Hulu told me that they use a variety of techniques depending on the context. They shared a Happy Birthday email that features a still, a VideoGif movie trailer, and an HTML5 email announcing new movies each weekend. Like Hulu, rotating between tactics depending on the video content and campaign goals makes the most sense.