Video in emailing : Domino’s case study

Disclaimer: I’m not going to state if using a video in an email campaign / newsletter is a good idea, we i do here is just to give you some real proper facts on how technically reliable it is for today.

I already wrote a blog post about it in April 2011, but that’s always good to remind old stuffs, and to see if things are getting better or worse. It’s been 3 years now…

Last week, i got this email from Domino’s Pizza (yes we do have Domino’s in France, we don’t eat only croissants and baguette for god sake…)

When i first see a video player in an email, it usually just a linked image to a YouTube video. But this one really looks like a native Safari one so i clicked just to be sure… and yes, this is a real video embed.

With no surprise, the code pretty much is exactly what you can find in my 3 years old post, following w3c standards minus the flash embed (since Flash is dead as a web component now). A plain HTM5 video tag, with multiple sources , and a youtube linked image as a fallback.

<video controls poster="https://www.dominos.fr/emailings/141012-extravideo/img/poster.jpg">
  <source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.mp4" type='video/mp4'>
  <source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.ogv" type='video/ogg'/>
  <source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.webm" type='video/webm'>
  <a href="https://www.youtube.com/watch?v=WPvS2MVy3p8">
    <img class="video" src="https://www.dominos.fr/emailings/141012-extravideo/img/video2.jpg" style="display:block;width:640px;" alt="Extravagazza 7€*" border="0" />
  </a>
</video>

Pretty straight forward!

End result generates this video embed:

How it works:

First, the video tag, which works as a container of multiple sources. Please note the “poster” attribute, used by the browser/client until the video is not loaded, If not specified, the first video image is used. The “controls” attribute is here to show the control bar below the video. Note that this bar is native to the browser so you can’t fully control how it looks. For an email please always keep it otherwise there is no clear indication for the user that this is a video, and this bar also contains volume (& other options like Airplay)

<video controls poster="https://www.dominos.fr/emailings/141012-extravideo/img/poster.jpg">
  ...
</video>

Second, multiple source tags which the browser/client choose by itself based on the video codec it supports. Each codec you provide a video file for must be specified by the “type” attribute.

MP4 is an proprietary codec (mostly owned by Apple), supported by Windows, OSX, iOS, most Android devices, WindowsPhone, Safari, Chrome & IE.

OGV stands for Ogg Vorbis, a (not so good) free open source video codec initiated by Mozilla, only supported by Firefox, Thunderbird & old non-webkit Opera.

WebM is a free open source codec based on the On2 technology OnVP6/8 that Google bought and open sourced. But because of the Google/Apple cold war, WebM is supported by Android but not by iOS, which makes it a dead horse for mobile…

<source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.mp4" type='video/mp4'>
<source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.ogv" type='video/ogg'/>
<source src="https://www.dominos.fr/emailings/141012-extravideo/video/extravaganzza10sec.webm" type='video/webm'>

Third but not least, the fallback image used by browsers/clients who cannot understand what video & source tags are or just have none of those codecs installed. (note that a target=”_blank” is missing…)

<a href="https://www.youtube.com/watch?v=WPvS2MVy3p8"><img src="https://www.dominos.fr/emailings/141012-extravideo/img/video2.jpg" alt="Extravagazza 7€*" border="0" /></a>

Test drive support:

Good god, that’s not pretty :S

Platform Ok? Show
WinXP Outlook Express No fallback
WinXP Outlook 2003 No fallback
Win7 Outlook 2007 No fallback
Win7 Outlook 2010 No fallback
Win7 WindowsLiveMail No fallback
Win7 WindowsLiveMail with edge meta No Poster+controls but “aborded” label
Win8 Mail ?? Mail is broken 🙁
Win8 Thunderbird Yes ogv
OSX Apple Mail Yes mp4
OSX Thunderbird Yes & No Poster. No controls. Right click/play works
OSX Opera Mail Yes & No Poster. Controls. Video freeze on first frame
Win7 Opera Mail Yes & No Poster. Controls. Video freeze on first frame
webmail Gmail (all platforms) No fallback
webmail Outlook.com – OSX Chrome No Poster. No controls. Right click/play doesn’t work
webmail Outlook.com – OSX Safari No Poster. No controls. Right click/play doesn’t work
webmail Outlook.com – OSX Firefox Yes & No Poster. No controls. Right click/play works
webmail Outlook.com – Win7 Chrome Yes & No Poster. No controls, right click/play works
webmail Outlook.com – Win7 Firefox Yes & No Poster. No controls, right click/play works
webmail Outlook.com – Win7 IE8 No fallback
webmail Outlook.com – Win7 IE11 Yes & No Poster. No controls, right click/play works
webmail Outlook.com – iOS Safari Yes mp4
webmail Office365 – (all platforms) No fallback
webmail Yahoo – Win7 Chrome No fallback
webmail Yahoo – Win7 Firefox No fallback
webmail Yahoo – Win7 IE8 No fallback
webmail Yahoo – Win7 IE11 No fallback
webmail Yahoo – iOS6 Safari No fallback
webmail sfr – OSX Chrome Yes mp4
webmail sfr – OSX Safari Yes mp4
webmail sfr – OSX Firefox Yes ogv
webmail sfr – WinXp Chrome Yes mp4
webmail sfr – WinXp Firefox Yes ogv
webmail sfr – WinXP IE8 No Javascript error doesn’t show ‘show images’ link
webmail sfr – Win7 Chrome Yes mp4
webmail sfr – Win7 Firefox Yes ogv
webmail sfr – Win7 IE11 Yes mp4
webmail laposte (all platforms) No fallback
webmail laposte Mobile -iOS6 Safari Yes mp4
webmail Free HordeIMP – OSX Chrome Yes mp4
webmail Free HordeIMP – OSX Safari Yes mp4
webmail Free HordeIMP – OSX Firefox Yes ogv
webmail Free HordeIMP – Win7 Firefox Yes ogv
webmail Free HordeIMP – Win7 Chrome Yes mp4
webmail Free HordeIMP – Win7 IE11 Yes mp4
webmail Free Zimbra (all platforms) No fallback
iOS 6 Yes mp4
iOS 7 Yes mp4
iOS 8 Yes mp4
Android Mail 4.1 No poster+controls but nothing shows
WindowsPhone 8.1 No fallback
WindowsPhone 8.1 with edge meta No Poster+controls but “aborded” label
Amazon KindleFire No fallback
Blackberry 10 Yes mp4
Blackberry Playbook Yes mp4
Firefox OS 1.1 No fallback
Gmail app iOS No fallback
Gmail app Android No fallback
Yahoo app iOS No fallback
SFR app iOS Yes mp4

Technically it sounds rock-solid, following W3C specs and providing a clean fallback. In real life, it’s a bloody mess! Look at those tests result and compare it with your metrics, then decide if it worth it or not.

Honestly and even if i really like it, my advice would be the same as 3 years ago: just don’t do it.

EDIT : March 12th, 2015

As Elliot Ross found out, iOS8 has a bug with video with the similar result of Blackberry 6 & 7. The video tag is still here, player icon shows up, but the video file does not load. Never.

So as previously said, for now, don’t do it.

Comments are closed.