Goolara Video in Email White Paper
Author: Jim Morton, Philip Thorne
Date: 2018-02-24T08:00:00+00:00
Keywords: email marketing; HTML; video
Publisher: Goolara, LLC

This white paper is published by:

Goolara, LLC 1030 Country Club Drive, Suite D

Moraga, CA 94556

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2018 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission
of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved.

www.goolara.com

INTRODUCTION

In 1962, Canadian philosopher of communications theory Marshall McLuhan published his book, The Gutenberg Galaxy, in which he stated that, thanks to the advent of things like the television and motion pictures, our methods of communication were changing from the printed word (the “Gutenberg Galaxy” of the title) to more visual forms of communication. People, he argued, were moving away from information that is read to information that is seen. At the time, McLuhan’s books were considered confusing and difficult to understand. Today, it seems more like he was stating the obvious

While the printed word lives on, no one can deny the power of video to capture people’s attention. Sometimes videos explain things better than words. Every email marketer has long wished for the ability include videos in email. Until recently, the only practical way to do this was to include a linked image to a web page containing the video, forcing the recipient to leave their email to view the video.

With the advent of the <video> tag in HTML5, video was made a lot easier to contend with on web pages. There was some resistance, at first, on behalf of the browser makers regarding some of the format decisions made by the World Wide Web Consortium, but today, nearly all browsers support HTML5’s new tags, the notable exception being Safari for the PC which does not accept any video or audio commands. Fortunately, few PC users, if any, opt for Safari as their browser of choice.

As is always the case with new technology, there are pluses and minuses to using the <video> tag in email. A number of things have to fall into place. First, your email client needs to be able to utilize the tag. If you are using a browser-based email client, your browser must also be able to utilize the tag. Whether or not your browser can use the <video> tag will also depend on the platform you are using (see the Email client and device video compatibility chart, later in this white paper). Safari on the Mac, for instance, can display videos, while Safari on the PC cannot. Even where it is implemented, some features work and some don’t. Nonetheless, its features are powerful enough to make it worth considering anytime you have video content that you want to share with your audience.

In this white paper we’ll take an in-depth look at the video tag with a thorough explanation of how it works and how to best implement it in your mailings. The <video> tag is not for novices. A working knowledge of HTML is recommended before you try and tackle this technique. We have, however, provided thorough examples of videos tags in this white paper that can be easily modified to suit your needs.

Most of the information given here is based on our tests using Goolara’s Symphonie email marketing software. Some of the information may vary slightly depending on which Email Service Provider you are using, but most of the information should still be applicable. For the examples shown in this white paper, we have used generic URLs. In some cases, the best place to store videos is on your own site. By doing this, you can create a branded page for your videos as an alternative to YouTube or Vimeo. You will need to check with your webmaster as to the best way to handle this. You may prefer to run everything through your email marketing system. Since every ESP handles images and videos differently, check with your provider for more vendor specific solutions.

But before we get too excited about video in email, we need to find out if it’s worth the trouble....

IS IT WORTH IT?

A recent study by The Relevancy Group found that marketers using video in their emails had a much higher ROI than those who did not. The marketers using video reported increased click-through rates, more sharing, higher conversion rates, and an increase in the size of the sales orders. “[M]arketers adding video had monthly revenues that were forty percent higher than those that were not using video in their email marketing,” the report went on to say. “Utilizing video in email drives engagement, conversion, and revenue.” Across the board, any metric you care to name came in higher for the mailings that contained videos.

So, should you be adding videos to your emails? The answer— as is often the case—is that it depends on several factors. There is no stock answer for everyone. Some businesses—an outdoor adventure tours company, for example, or a film studio—can do very well with videos. Any company whose products or services have some kinetic aspect to their appeal is a prime candidate for video in email. If your products or services are not conducive to video, or are easily conveyed by a photograph, then videos may be more trouble than they are worth. If your main interest in video is to create appeal, you may find that you can achieve the same results with far greater compatibility using an animated gif.

In any case, there are a few important things to remember before you start exploring video in email:

Video production is expensive

You may have a way of getting videos done cheaply, but even so they will cost you more than text and images. Videos usually need scripts, set-ups, and editing, not to mention the fancier aspects of videos such scene transitions, the addition of music, and image overlays. All of this takes time and money. Unless you were a filmmaker in a previous life, you’ll need
to hire someone to do most of this work, and that means someone else you’ll have to supervise to make sure the video they produce satisfies your requirements. If you are already producing videos for your website, then video in email might be a great way to introduce more people to these videos.

It’s time consuming

Even after the video is finished, you’ll need to create static images for the poster and alternative link (more on these later). The images will require some familiarity with a graphics program. And since many of the features available with the

<video> tag are not implemented in email clients, you’ll also be required to do a little HTML coding to maximize the value of the tag (see A Bulletproof Solution, page 10).

It won’t work everywhere

Although every day, more and more email clients are adding HTML5 compatibility to their features, many still do not. What works and what doesn’t varies depending on the platform and how the email is being viewed. Gmail, Yahoo, GMX, and AOL, for instance, will not display a video in any of the browsers, but they will on the iPhone and iPad. While Outlook.com
is the most HTML5-savvy email client out there, Microsoft’s Outlook program for the PC is not. On the Android side, HTC and some Samsung Galaxy models currently supports video in email. Of course, all of these statistics could change tomorrow. It wasn’t that long ago that email marketers were cautioned against using image maps, and now virtually every email client can read them.

Fig. 1: Email client and device video compatibility chart.

It’s tricky

Look at the image above. This is what you get when you insert a video in an email without any preparation or modification and the “controls” attribute included in the <video> tag. It looks easy enough to figure out. Click on the play button and the video should play—except it won’t. While several email clients now accept video, most disable the video’s control bar. To play the video, you often need to right-click on the image.

This isn’t a very intuitive step, so you need to make sure that you’ve prepared the video correctly to get the most out of it. In The Bulletproof Solution (page 10) we’ll show you exactly how to accomplish this, but first, a little background on the <video> tag, its attributes, and how it works.

THE ANATOMY OF A <VIDEO> TAG

The key to using video in an email is the <video> tag, introduced in HTML5. While many email clients and platforms still ignore HTML5 tags, the <video> tag is designed so that if the email client can’t play the video, you can still provide a fallback alternative. Here is the basic format:

<video> [Size, display image, and other attributes can be added to this tag.]

<source> [This should include the main video link.

<source> [A second (or even a third, or fourth) link to alternative video file types may be included for maximum compatibility.]

Alternative information. [This is the information that will be displayed if the email client/platform can’t utilize the <video> tag. This can include text, images, and/or links.]

</video> [The closing tag.]

Tags

Besides the <video> tag, you’ll notice that the video command structure also includes a second tag titled the <source> tag.

The <source> tag acts sort of like a dispatcher, finding out
which video format your browser prefers and fetching it. The <source> tag requires no closing tag. All its information appears within the brackets. If a <source> tag cannot be performed, the next line of code is used. Sometimes this is another <source> tag.

Attributes

The <video> and <source> tags may include any of the following attributes:

Some of these attributes, such as src, height, and width were common to HTML already and need no introduction. The “src” attribute is used by the <source> tag to point the email to the video. The “src” attribute is also used to provide the alternative link if the email client can’t facilitate the <video> tag.

Some attributes are problematic even when the email client can use them, so they are best avoided. “Controls,” for instance, displays the play button, progress bar, length, audio level, and fullscreen toggle. It can also display subtitles or alternate audio tracks when applicable. This may seem useful, but in most situations, the controls are disabled anyway, and only serve to confuse the viewer when they try to use them. Other attributes, such as autoplay, muted, and loop will only work in Outlook.com and Hotmail right now, and so are not of much use at this time.

By far the most useful video attribute is “poster.” This lets you assign a picture to appear before the video has started to play. This picture does not have to match the content of the video, but it should be instructive. Instructions on how to play the video are a good idea (see The Bulletproof Solution).

“Preload” determines how a video loads. It has three options: auto, metadata, and none. “Auto” is the default and loads the entire video. “Metadata” only loads things like the dimensions, the first frame (if no poster image is available), and the duration. “None” is just that; it loads nothing. If a poster image is specified, that will still be displayed, but the video may take slightly longer to start after choosing play. Preload does not currently work with Internet Explorer.

VIDEO BEST PRACTICES

Sending an email with an active video window in it comes with its own set of best practices not often discussed. The basic
rules are the same as for any other email: Keep it simple and don’t be a nuisance. It is tempting to use all the new attributes available in the video tag, but resist the temptation. At the very least, do some A/B testing to see how these features effect your deliverability and response rates. Here’s a few things to keep in mind:

#1: Autoplay isn’t always a good idea It may be nice to have some visual stimuli as soon a recipient opens the email, but, if you’re
not careful, you stand a good chance of aggravating your recipients. Some people don’t like to have their email waving at them when they open it, and will respond unfavorably.

Autoplay, also, does not work with most email clients. At this time, only Hotmail and Outlook.com utilize the autoplay attribute.

#2: Audio is more annoying than video

If you are absolutely set on implementing autoplay in an email, you are going to want to either make sure the clip is either silent, or you have added the “muted” attribute to the

<video> tag. Even more annoying than a video that starts upon opening is one that’s making noise. If your video does contain sound, be sure that its levels are consistent with, or slightly lower than, the average online sound levels. Nobody likes when their email screams at them. This is also true if you are planning to use the <audio> tag. As with the <video> tag, the <audio> tag was introduced with HTML5 and it works on the same platforms as the <video> tag.

#3: Use looping only when it makes sense

The most apt use of the “loop” attribute is when the video forms a recursive pattern. A video of a waterfall, for instance, could use looping to create the appearance of a much longer video. On the other hand, a video that goes through a series of instructions will only confuse the audience if it starts over. As with most of the other <video> tag attributes, “loop” does not often work in email at this time. It would most logically be pared with autoplay, which means, for now, it is a technique best saved for the day when the majority of email clients can utilize all the HTML5 commands.

#4: Make it easy on your readers

As previously mentioned, the “controls” attribute will let you display the controls, but it won’t let you use them. A video with the controls showing, but no poster image is going to confuse people. Many emails require the user to right-click the image so make sure that this information is somewhere on the page, either in the poster image for the video (see the next chapter for more information on this) or in the text near it.

#5: Shorter is better

The longer your video, the slower it will load. The slower it loads, the more likely your reader is going to lose interest and go on to something else. Ideally, the video should start playing in under ten seconds. More than that, and people begin to lose interest.

A BULLETPROOF SOLUTION

As you’ll have probably gathered by now, simply sticking the <video> tag in your email with a video source is not going to solve all your problems. Too many email clients still do not recognize the tag. You need some way to make sure that the people who can’t see the video in their email have an alternative. You’ll also need to make sure that the email clients that can display videos don’t confuse the readers. This will take a little knowledge of HTML and how to write it, but not much. With a simple few modifications to the video commands, you can ensure maximum compatibility across all platforms.

The Poster Image

The “poster” is an image that appears before a video begins to play. If no poster image is assigned, the video window will display the first frame of the video. The poster image is inserted into the opening video tag like so:

<video poster=”http://yourcompany.com/videos/ image.jpg”>

Technically, the poster image doesn’t have to be related to the video in any way. You could use a poster image of a kitten to introduce a video on truck repair, but we don’t recommend this. Ideally, the image the recipients see should reflect the video both in window size and content.

One of the biggest obstacles to using videos in emails is the fact that most email clients disable the control bar on the videos. If a viewer wants to play the video, they’ll need to right click on the image and choose “play.” This isn’t particularly intuitive, and a recipient is liable to click on the control bar repeatedly and then give up. The poster image offers a perfect opportunity to provide a solution for your subscribers. By overlaying the phrase, “Right click and choose play” on the poster image, you provide your audience with the information they need to play the video. This message can be placed anywhere on the image. Here is an example:

In this case, we’ve taken a screen shot of one frame from the video and placed a green bar over it with the explanatory text on top. We’ve also added a drop shadow to the text to make it stand out more. While we would normally center the info bar on the image, we’ve chosen to move it down so that the bar does not interfere with the main information in the image (i.e., the tugboat). Since the video starts before the tugboat appears in the frame, we chose a frame from later in the video to provide more visual information.

Here is a simpler treatment with the same image that also gets the point across:

In each of these examples, the image serves two functions. First, it shows a frame from the video to give the recipient some idea of what to expect. The <video> tag is going to do this anyway, but by using the poster attribute, you can control exactly which frame is displayed for maximum impact. Second, it also contains the information the reader needs to play the video. Right-clicking on the image causes a pop-up menu to appear:

From there your readers should have no difficulty playing the video.

Source

Most current versions of the popular browser work with mp4 videos at this time, but the video tags allow you to specify more than one potential video source, so that if your browser or stand-alone program cannot read the first file type, it moves on to the second one. If it can’t use that one, it tries the third, and so on. For this reason, it is always a good idea to provide more than one video source. Here, for example, is a list of four possible video sources:

<source src=”http://yourcompany.com/videos/video. mp4” type=”video/mp4”>

<source src=”http://yourcompany.com/videos/video. ogv”

type=”video/ogg”>

<source src=”http://yourcompany.com/videos/video. webm” type=”video/webm”>

<source src=”http://yourcompany.com/videos/ video.3gp”

type=”video/3gp”>

In this case the browser/program checks to see if it can run
the MPEG- 4 video first (.mp4). If it can’t it moves on to the Ogg Theora file (.ogv), which is preferred by the Opera
browser. After that it tries WebM and finally 3gp (a common video format for cell phones). If it can’t use any of these, or if the email client is not fully compatible with the <video> tag, which is more likely, it moves on to the next line. This can be text (e.g., “Your email viewer does not support video”), an alternative link, or both. Since you want as many people as possible to view the video, an alternative link is the preferred option here.

Fig 2: Browser video compatibility chart

Which format(s)?

As the list above suggests, MPEG-4 is the most compatible format, but not just any MPEG-4 will do. Specifically, you’ll want to use MPEG-4 files that is encoded with the H.264 codec, also known as MPEG-4 Part 10, or MPEG-4 AVC (Advanced Video Coding). This is the codec used by YouTube, Vimeo, and others, and it is becoming the de facto standard for video on the Internet. This development is not welcomed by everybody. For several years, the folks at Mozilla (makers of Firefox) said they were not going to support the format, opting, instead, for Ogg Theora and WebM because they are open formats and distributed without licensing fees. Then in early 2012, Mozilla did an about face, announcing support for H.264 encoded MPEG-4 files due,to their ever-increasing popularity. In January 2011, Google announced that they were pulling support for H.264 in favor of Ogg Theora and WebM, however, they have yet to follow through on this threat. Safari supports H.264 on the Mac, but does not support the <video> tag at all on the PC. Opera only supports Ogg Theora. You could probably use only the mp4 file to reach 90% of your audience, but the inclusion of other formats ensures more people will see your video.

The Alternative Link

Because not all email clients are compatible with HTML5, an alternative link provides a nice alternative display in these situations. The alternative link should follow this format:

<a href=”http://yourcompany.com/videos/ myvideopage.html”><img width=”420” height=”241” alt=”Click here to play video” src=”http:// yourcompany.com/videos/ alternative-image.jpg”>

</a>

The first half of the tag contains the URL where the video is located. The URL does not need to link to a page. It could link directly to the video. Nor does it have to be a page on your site. You could link to the video on a YouTube or Vimeo page, for example, but the use of your own page gives you a better opportunity to brand the video.

The second half of the tag contains the <img> instructions. This is the information for the image to display if the video can’t run in an email client. It also contains the alt information, which can also be styled if you desire (see our white paper, Using Text & Images for more information on how to create styled alt tags).

Ideally, the image included in the alternative link should be similar to the poster image, but without the “right-click to play” information on it. It could be a frame from the video, or one with instructions on it (“Click here to view video.”). One popular approach is to add a play button to a frame of the video:

It’s easy create your own play button in Photoshop, Illustrator or some other graphics program, it is, after all, just a circle with a triangle inside it. If you want to try something a little fancier, you can do an image search for “play button” and you’ll find hundreds of variations. If you choose this approach, you’ll want one with a transparent background, to lay over the screenshot. This can be either a transparent PNG image, or a vector graphic. Cliker is a site that offers vector graphics and has dozens of play buttons available to download for free. Click here for a direct link to their play buttons list, or visit: http:// www.clker. com/search/play+button/1

If you do choose to add a play button to the image, it is also a good idea to add autoplay to the page’s <video> tag. Unlike using autoplay in an email, where it may come across as an unwanted intrusion, in this case they’ve already clicked the play button, so they’ll be expecting something to happen when the page is opened.

When fully composed, your <video> tag information will look something like this:

<video poster=”http://yourcompany.com/videos/ image.jpg”>

<source src=”http://yourcompany.com/videos/video. mp4” type=”video/mp4”>

<source src=”http://yourcompany.com/videos/video. ogv” type=”video/ogg”>

<source src=”http://yourcompany.com/videos/video. webm” type=”video/webm”>

<source src=”http://yourcompany.com/videos/ video.3gp” type=”video/3gp”>

<a href=”http://yourcompany.com/videos/ myvideopage.html”>

<img width=”420” height=”241” alt=”Click here to play video” src=”http:// yourcompany.com/videos/alternative-image.jpg”>

</a>

</video>

The poster image provides the necessary information to play the video. The source lines give you the alternative video formats (optional), and the <a> tag contains the link and image for email clients that can’t or won’t display the video in the email. If you only have one video format, don’t worry. As long as it is an H.264-encoded mp4 file, your video in email will be compatible with Firefox, IE, and Chrome.

That’s all there is to it. With those four to seven lines of code you can create an email that includes video when the email client allows it, and a link when it doesn’t. If you have ever considered using videos in your emails, the statistics strongly suggest that it is worth the effort.

Using animated GIFs

Another approach for the alternative link is to use an animated GIF instead of a link to an actual video. This may work if your video is very short but is not recommended for videos more than a few seconds long. The alternative link information in this case would consist only of an <img> tag. Example:

<img width=”420” height=”241” alt=”Click here to play video” src=”http://yourcompany.com/videos/ animated-image.gif”>

Keep in mind that if you are using an animated GIF, they also do not work in all circumstances. To be safe, it is a good idea to start the animated with a frame that contains all the pertinent information.

SUMMARY

With HTML5 came the <video> tag. The <video> tag lets you insert videos directly in your emails. Now that HTML5 is implemented by the major browsers,
it is a viable tool for creating email. A recent survey by the Relevancy Group shows that marketers adding videos to their emails had monthly revenues that were forty percent higher than those that were not using video. Whether it is worth it for you to use video depends on several factors, such as the nature of your business, the expense of making videos, and your technical skills. It is also important to remember that the

<video> tag will not work in all circumstances, so your email must be designed with this in mind.

The <video> tag consists of several components. The most important components are the poster attribute, which lets you assign an alternative image to be displayed before the video begins playing, and the <source> tag, which indicates which type of video file the email will use. The <video> code block should also include an alternative link to be used when an email client can’t run video directly. The alternative link can simply be text, a link to a page containing the video, or even an animated gif.

As a rule, it is a good idea to avoid using the autoplay function within the email. It should be used only on the landing page for the alternative link. If you do plan to use autoplay in your mailings, a silent video or a video with “muted” added to the

<video> tag is a good idea. Loops may also be used but only when the reoccurring information makes sense. Keep in mind that, at this time, these attributes do not work in most email clients. To make sure your email is compatible with most email clients, your video instructions should include at least the following:

• A poster image with “Right Click and Choose Play” appearing somewhere within it.

• An H.264-encoded mp4 file as your first source video, with an Ogg Theora (.ogv) and WebM (.webm) file as alternatives.

• An alternative link that takes you to the video when an email client is not compatible with the <video> tag.

• An animated GIF can also be used as an alternative as long as the video isn’t too long.

About Goolara

Goolara has been in the email marketing business since 2005. Symphonie, Goolara’s premiere email marketing solution is available in on-premise and cloud-based, SaaS deployments. The powerful software features many advanced capabilities, such as full-featured dynamic content, transactional and triggered email, and customizable report generation features. It is easy to use and runs from a browser-based interface using Chrome, Firefox, Internet Explorer, or Safari. Goolara is headquartered in Moraga, California and can be found online at www.goolara.com.

Goolara, LLC

1030 Country Club Suite D Moraga, CA 94556

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2018 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved. All other company and product names and logos may be trademarks of the respective companies with which they are associated.

www.goolara.com

Table of Contents

- INTRODUCTION

- IS IT WORTH IT?

- Video production is expensive
- It’s time consuming
- It won’t work everywhere
- It’s tricky
- Tags
- Attributes

- VIDEO BEST PRACTICES

- #2: Audio is more annoying than video
- #3: Use looping only when it makes sense
- #4: Make it easy on your readers
- #5: Shorter is better

- A BULLETPROOF SOLUTION

- The Poster Image
- Source
- Which format(s)?
- The Alternative Link
- Using animated GIFs

- SUMMARY

- About Goolara