Many of you have asked us whether it is possible to include video within your email campaigns. You’ll be pleased to hear that the answer to this is a resounding ‘Yes!’.

It is 100% possible for you to include video content in any email campaign, and you can implement this in a number of different ways.

If you require any assistance including a video in your campaign, contact the Campaignmaster Support Team.

Linking via an Image

This method is more of a ‘trick’ which tempts subscribers to click on a pseudo-video image that takes them to a web page containing your real video e.g. YouTube, Vimeo etc…

Below, you can see our ‘fake’ video image, which has been mocked up with some convincing play/pause controls. By placing an ordinary link onto the image any subscribers clicking it will be whisked off to view the video on a separate web page.

Outlook 2007

In the result below you can see that the pseudo-video image is displayed in the email, and looks like the genuine article. A quick and dirty solution!

Pros:

• Quick and easy to implement
• Supported across all email clients (It’s just a plain old image after all)
• Clearly shows subscribers that you have video content you wish to share

Cons:

• Subscriber has to view video on external page.
• Not very cool!

Embedding

The HTML5 revolution is in full swing, and with it comes the rather exciting <video> tag. As some of you will know, most email clients have woeful support of HTML4, let alone HTML5.

With that in mind it may come as a surprise that the HTML5 <video> tag is supported across a few email clients (and it’s support is growing). Not only that, but for email clients where the <video> tag is not supported, you can specify a fallback image (exactly like the “Linking via an image” method shown above). It’s almost too good to be true!

At the time of writing, the method below will display an embedded video in Apple Mail, iOS Mail and Entourage 2008. All other email clients will display the fallback image. (Hotmail support can be added, but is a bit tricky)

To get started, you’ll need the code below pasted where you wish to insert your video content.

• poster – This is the placeholder image that is displayed before the video is played
• source – This is the direct link to your video, which is in .mp4 format
• a – The fallback webpage link that will be placed on your pseudo-video image for non-HTML5 compliant email clients
• img – The psudeo image that will be displayed instead of a video for non-HTML5 compliant email clients

For your ‘poster’ image we recommend you use an image that summarises your video. When your email loads, this will be displayed and overlaid with play/pause controls. Once clicked, this image will disappear and your video will begin.

For your fallback image, you should use the same poster image, but place pseudo play/pause controls over it. This way, your subscribers can see that the image is a video, and not just a plain image. Let’s look at the results.

Apple Mail

Above we can see our fully operational embedded video, proudly loading in Apple Mail. The video can be played from directly inside the email, and behaves as you would expect. Subscribers do not need to navigate away from your email, making your engagement process extremely clean and slick. Very cool stuff!

iOS Mail

Here’s our email in iOS Mail. As you can see, it’s looking good (It’s been resized by our mobile optimised CSS) and the video has a ‘play’ control overlaid on it. Once touched, the video will then being streaming in the iOS version of QuickTime. Success!

Outlook 2007

While our video does not display in Outlook 2007, our fallback has merrily stepped in and displayed our ‘fake video’ image. Once clicked, the subscriber’s web browser will take them off to the online version of our video.

Hotmail/Outlook.com

Moving over to webmail we saw that our fallback image was displayed in Gmail and Yahoo! without issue. However, the new Hotmail/Outlook webmail hit a snag with our .mp4 video file format in Firefox. We will follow up on video formats and cross-browser compatibility soon.

Pros:

• Video is directly embedded in email
• Fallback displayed by unsupported email clients

Cons:

• Does not work in Hotmail (Follow up to this soon)

Embedding video is well supported by iOS mail, Apple Mail and Entourage 2008. All other email clients displayed our fallback image of a pseudo-video, which could be clicked to open the video on a separate webpage……except Hotmail / Outlook.com.

Hotmail / Outlook.com

During our testing we noticed that Hotmail / Outlook.com did indeed support the HTML5 code we used in our email. The email has loaded and it’s displaying our video poster image (not the fallback image) complete with controls. But after giving the play button a click, nothing happens :'(

While the video itself is ‘live’, the playback controls have been disabled. The only way to get the video to play is by right clicking it and selecting ‘play’. Not a very elegant solution, but it works. I’ve seen some emails include ‘Right click to play’ text next to the video, or even embedding the text in the poster image of the video.

Our biggest issue with this, is that there is no recourse for subscribers except right clicking. They cannot simply click on the video and be whisked off to a hosted page (like the fallback method).

As we mentioned previously, it’s best to get a good idea of your subscriber email client demographic, and use the most appropriate option available when deciding on using a pseudo-image or live embedded video. Sending to Hotmail / Outlook.com subscribers? Use a pseudo-image. Mostly Apple Mail & iOS subscribers? Go for embedded. Feeling smart? Split your list and go for both!

Cross-Browser Compatibility & Video File Types

While testing in Hotmail / Outlook.com, we also came across the issue of browser compatibility with video file formats (that’s right, in addition to email client compatibility, stay with us!).

The video sent in our email was an .mp4 video, this is well supported in iOS, Apple Mail, Entourage and webmail clients viewed in Chrome & Android browsers.

Mp4 video is not supported in Firefox or Opera, so if you view the email in Hotmail / Outlook.com you’ll run into the screen above.

Our poster image is being displayed, but it’s been overlaid with a codec error message and cannot be played. When clicked, it doesn’t link off to our fallback page either.

In order to enable playback in Firefox and Opera, you’ll need to add two additional video files in WEBM and OGG format. We know this sounds a bit crazy, having three files of the same video, but if video is important to you it’s well worth doing.

You can convert your existing .mp4 video quite easily (a quick google search for online video conversion will turn up a few sites) into WEBM and OGG format, and include them in addition to your MP4 file.