Last week, there was a whole lotta shakin’ in regards to Hotmail introducing partial support for HTML5 video in email. While the results weren’t promising, it soon became pretty clear Hotmail wasn’t the only client that had undergone changes since we published our popular ‘Video in email‘ feature in 2009. So, I figured it was high time that we refreshed our results and provided some recommendations for good measure.
Video and HTML5: One step forward, three formats back
While a lot of the fundamentals covered in our earlier post on HTML5 video in email have remained the same, the rise of multiple containers (or loosely, file formats like .mp4 or .wmv) and codecs has made embedding video a hairier task than ever on the web. However, as Hotmail is the only webmail client showing any promise in regards to video playback, you could probably get away with using mp4 only for the benefit of iOS devices.
If you do want to try your luck with Hotmail, ‘Dive into HTML5‘ recommends that you link to 3 video files/containers from within HTML5’s
<video> tags for maximum compatibility across multiple platforms. These containers are:
- MP4 (H.264 baseline video and AAC “low complexity” audio) – for Android, Chrome and iOS
- Ogg (Theora video and Vorbis audio) – for Chrome and Firefox
- WebM (VP8 + Vorbis) – For Chrome and Opera
Note that Safari will play any format that Quicktime supports, being all of the above. The dubiously good news is that as Flash and
<object> tags still aren’t supported in email clients, they’re not a concern to us here.
So, if you’ve got the 3 versions of the same video ready, then you can embed them into an HTML email using the following code, courtesy of the ‘Video for Everybody Generator‘. Note the inclusion of a fallback image, which displays if HTML5 is not supported:
<video width="600" poster="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/fallbackimage.png" controls autoplay>
<source src="http://mydomain.com/video.mp4" type="video/mp4" />
<source src="http://mydomain.com/video.webm" type="video/webm" />
<source src="http://mydomain.com/video.ogv" type="video/ogg" />
<a href="http://mydomain.com"><img border="0" src="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/fallbackimage.png" label="Fallback Image" width="600"></a>
Now, I’m certain this looks like a highly pedantic approach to getting video to play in email. But it will ensure playback in Apple Mail and iOS devices (which are well on the rise) and potentially in Hotmail, if our early attempts are anything to go by. Again, you can choose to only use mp4 for video display in Apple Mail/iOS only.
Current email client support for HTML5 video
As before, video plays beautifully on iOS devices and in Apple Mail, which is excellent news. While on the topic of mobile clients, we were successful in getting the fallback image to display in most, except the default email client on Android phones. Strangely enough, the video controls display, but the video never loads. This is a pretty bad outcome in an otherwise solid mobile email client – we’re still looking into whether trickiness with codecs could be at fault here.
Webmail clients also displayed the clickable fallback image in place of the playable video, which is an advantage that embedding video using HTML5 has over previous methods. The notable exception is of course, Hotmail – which despite the lack of video controls, does play HTML5 video in some instances when prompted, or the
autoplay attribute is used.
Finally, all the desktop clients we tested either played the video, or displayed a clickable fallback image in its place. So without further hesitation, lets get to the results:
|Desktop email clients||Result|
|Apple Mail||Video plays|
|Lotus Notes 6, 7 and 8.5||Fallback content displayed|
|Outlook 2003, 2007, 2010||Fallback content displayed|
|Outlook for Mac 2011||Video plays|
|Windows Live Mail 2011||Fallback content displayed|
|Web-based email clients||Result|
|AOL Web||Fallback content displayed|
|Gmail||Fallback content displayed|
|Hotmail||Video plays when prompted – see details|
|Yahoo! Mail Beta||Fallback content displayed|
|Mobile email clients||Result|
|Android (default)||Controls display, but video does not play*|
|Android (Gmail)||Fallback content displayed|
|Blackberry||Fallback content displayed|
|Windows Mobile 7||Fallback content displayed|
* This could be an video encoding issue on our part – if you have better luck with Android video playback, please let us know.
HTML5 video in action
Using the updated code, I ran a test email through a variety of popular email clients. Note that I couldn’t get the video to resize using a mobile stylesheet, so this layout may look a little wonky on mobile devices.
To see HTML5 video in action on the iPhone and in Windows Outlook, please refer to our previous blog post, as the behaviors in these clients have not changed. On the Hotmail front, here’s an example courtesy of Andy T’s ‘Get in the Inbox’ blog:
As for fallback images, these displayed in a consistent manner across the majority of email clients that don’t support HTML5 email, which make them perfect for featuring a ‘View video’ -style call to action, a play button, or something similar to prompt the recipient to view the video it’s linked to.
Using Hotmail and Gmail previews to view YouTube clips
Now, I promised that I’d mention another technique for embedding video – or at least getting it to display in Hotmail and Gmail. By uploading the video first to YouTube, then adding the URL to your HTML or plain-text email as text, you can get an inbox-playable preview to display. Here’s an example of this in Gmail:
The downside of this is that adding URLs as text can trip off phishing warnings in some email clients, so this should be applied with care. That said, we didn’t have any deliverability issues getting our test emails into Hotmail and Gmail inboxes, so this may be a handy technique if sending primarily to these clients.
You can read more about this technique in our earlier blog post on ‘Using YouTube Previews to display video in Gmail‘. The same technique works in Hotmail, with very similar results.
Should I be using any of these techniques?
HTML5 remains the best option for embedding video in email. Being able to reliably provide a fallback image is most certainly advantageous in non-Apple email clients – then for Apple users, the option of watching video in the inbox can potentially make for a unique and engaging experience.
Our recommendation remains that you should decide if it’s worthwhile to send video email by referring to your email client reports first. If a high percentage of your subscribers are using Apple devices, then it could be a neat move. Other recipients will see the fallback image, which you can use to prompt click-throughs to a version of your video hosted online.
Hotmail and Gmail video previews have dubious value, unless you’re sending plain-text email (and have to expose your links, anyway). However, I’d be curious to hear if any of you have used it with success.
Regardless of whether or not you believe that email is an appropriate medium for email, I have no doubt that at some point, your clients will ask about whether it can be done. Keeping in mind that you’re not actually sending the video file (it only streams in supported email clients), it could prove to be a solid way to bring a demo video or pitch that one step closer to subscribers – if done tastefully, of course. If you’ve had success with this approach, or any alternate approaches for that matter, we’d be delighted to hear from you in the comments below.