How to: HTML5 Video in Email

How to: HTML5 Video in Email

How to: HTML5 Video in Email

Bex Osborn

Marketing Strategist

26 Oct 2011

Fully functional video in email has always been a bit of a holy grail for email marketers.

There's been several close-but-no-cigar moments, including using large animated gifs or using proprietary javascript plugins.

These have been good as far as they go, but there's always been drawbacks in terms of support or functionality.But thanks to increased support for HTML5 in email clients, combined with the rise in popularity of HTML5 supporting smartphones like the iPhone and Android platforms, fully playable email video is becoming a viable proposition.There's plenty of reason to use video - it can be really effective in communicating a complex marketing message, and can really help demonstrate ideas and inspire to your audience.

And there's plenty of real world uses - for example to show off a travel resort, to demonstrate the features of a product, or to provide help tutorials post-purchase.I've used video on several campaigns and found it really effective in driving engagement and click-throughs.

On some campaigns we've also combined it with a share-with-your-network button to encourage users to share the video on Twitter and Facebook.Whilst video can be successful, it's always important to ensure that the video is there for a reason - it needs to be supporting a clear creative message or proposition, and not just there because we can do it .

Where is HTML5 video supported in Email? The good news is HTML5 video is supported on mobile devices like iPhone, iPad and some Android devices, plus on the desktop Apple Mail and Hotmail.

It also plays fully when the hosted version of a campaign is viewed in Firefox, Chrome, Safari or Internet Explorer (9 and above).And when it's not supported (Outlook, Gmail, Yahoo! Mail) it's easy to specify fallback content like an image with a link, so users of those email clients don't feel like they're missing out.

The code (code based on Campaign Monitor 's initial findings) So what's going on here? The tag  has a width and a height, standard stuff.

The controls="controls" attribute is important, and as you can guess adds play controls to the video.

The poster="posterimage.jpg" attribute is the image that is displayed when HTML5 is supported, but the video isn't playing.

It's subtly different to the fallback image, as we'll find out.

There's two tags - we need an mp4 for most email clients, but we need .ogg for Firefox.

Inside the tags is our fallback content - for users that can't view the video in their email.

In this case, we have an image with a link.

This is a commonly used technique, and this image is often artworked as a still of the video with a play button added - driving the user to a landing page where they can watch the video in a browser as normal.

As the iPhone and iPad interface adds its own play button, it's worth making sure that the poster image doesn't have your own play button - so in that way it's worth differentiating between that and the fallback image.

(as with all email code, the locations for video files and images should be absolute not relative) Get stuck in! Have you seen any video emails out in the wild? or even built some yourself? let us know how you get on in the comments...

Resources Campaign Monitor have looked at the various options for embedding video into email Style Campaign looks at using Animated GIFs in creative ways to mimic video

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

© 2011-2024 Action Rocket Ltd. All rights reserved.