Video may have killed the radio star, but it’s certainly alive and kicking in email.
You probably already know this, but adding captivating and entertaining videos to your email content can significantly increase your click-through rates. Having video content that drives end users to take actions, helps provide you with a better insight into user engagement and interactivity, and as Michael Litt once said…
“The play button is the most compelling call to action on the web”
Michael Litt – Vidyard CEO
Let’s take a look at the different types of video is being utilised today, plus some coding tips on how to implement video within your own email marketing.
Lights, Camera, ACTION!
The Prequel
In today’s online world, video is everywhere – streaming out the sides of the internet and going full screen on every platform. Videos online evolution can be associated with renowned sites such as YouTube or Vimeo, both created in the early 2000s. These types of sites have transformed the way we see and interact with videos online, paving the way for video sharing, streaming, higher visual and sound quality, and the significant development of audience targeted programming.
Nearly all social media channels today have involvement in video; Facebook, Instagram, Snapchat, Google+, Twitter – to name a few. So it’s no surprise that videos next evolutionary step was into email… in fact it would have been unusual not too.
The Main Feature
So let’s take a look at how you can take advantage of the benefits of having video within your own emails, by giving you some helpful tips on how best to implement it.
Please place your mobile phones on silent, turn off any recording equipment and sit back and enjoy the show…
There are two main ways of placing video into your emails.
The first would be to have an actual mp4 video file playing directly within your email using HTML5 video, with a fallback image for those email clients that cannot play video. Unfortunately because the list of email clients that support a full working embedded video file is quite limited, the fact is your fallback image is more likely to be displayed than your video… which makes your video file a bit of a B movie email.
The second, not so advanced but more widely accessible method, would be to incorporate a link to a video within your email by using an animated image or GIF of a video. Utilising a GIF (see below) instead of a full video file ensures your video is more likely to be supported by email clients. So your end user gets the impression of a full working video, while you relax knowing you haven’t got the drawback of your video not displaying within your email. Using a video format that’s more widely supported, like a GIF, allows you to reap the benefits of having a blockbuster email that drives higher engagement levels.
For more information on the benefits of GIFs, check out our blog: Quick Guide to GIFs in Your Emails
The Visual Effects
Now, if you do decide to go down the route of embedding a full video file with a fallback image in your email, we’ve got some technical tips to help you along the way.
Let’s take a look at the code* below and go through how we actually get a video embedded within an email.
As this is a HTML5 build we can start with simple doctype: <!doctype html>
Within the stylesheet the video is wrapped in a display: none, until requested to display: block, dependant on the viewing platform. Vice versa for the Video fallback.
The @supports styling are workarounds for different iOS platforms and a Yahoo fallback. #MessageViewBody is for displaying video with the Samsung email client on the Galaxy range.
The next two sections are the video section, with a pre-play/poster image, and the first fallback image, for those email clients that don’t play video.
The second fallback section is for email clients that load the pre-play image but won’t play the video. This just links an image to an online or streamed version of the video.
The size of the video can be set inline, currently 320×176, just remember to set/change it for the fallback image as well.
<!doctype html>
<html>
<head>
<title>Jellyfish</title>
<style type="text/css">
.video-wrapper {display:none;}
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
.video-wrapper { display:block!important; }
.video-fallback { display:none!important; }
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=video-wrapper] { display:block!important; }
div[class^=video-fallback] { display:none!important; }
}
#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }
</style>
</head>
<body>
<!-- video section -->
<div class="video-wrapper" style="display:none;">
<video width="320" height="176" controls="controls" poster="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" >
<!-- fallback 1 -->
<a href="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" ><img height="176" src="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" width="320" /></a>
</video>
</div>
<!-- fallback section -->
<div class="video-fallback">
<a href="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" ><img height="176" src="blob:https://docs.google.com/91acb26d-2833-4aa8-ae04-b37816b9a9e6" width="320" /></a>
</div>
</body>
</html>
The Sequel
Now if you’re not one for coding, there are some companies, like playable.video, that will take your video file, convert it and provide a 10 second clip with the code to embed into your email.
Our best practice top tips would be to use a small video file size within your emails – just like images you don’t want a long download time. So if you like the mentality of “build it and they will come”, having engaging video content within your emails could give you that edge over your competitors, meaning more subscribers, more clicks and potentially more sales!
Updates and testing are ongoing for video in email. The above code was edited at the end of 2017. In the meantime, “the first rule of video” is not to forget the fallback imagery… “they may take our video, but they will never take our images!”
The future of video will hopefully provide streamable videos directly in your inbox, meaning “where we’re going, we don’t need fallback images”…but that’s (potentially) in the future.
So “show me the videos” and lets see your emails go “to infinity and beyond”, and “I’ll be back” soon with more blogs.
*Code from Justin Khoo of Freshinbox – Codepen https://codepen.io/freshinbox/pen/yMLLoX
