Embed Video in Email has Made a Comeback… with a BANG!!!

It’s an age of being connected. Globally each person uses at least 3 connected devices. As per a study, viewing emails is the most preferred activity on a mobile device, and social media stands 4th on that list. With social networking sites like Snapchat, Vine, and Instagram having a feature to share videos amongst users, the potential of ‘video’ as a powerful marketing tool has emerged loud and clear of late.

Even though videos are supported only by Thunderbird, Apple Mail, Outlook on Mac, iOS Mail, and Samsung Mail as of now, workarounds exist that allow us to embed video into email across other clients too.

How To Embed Video Into Email

Before you proceed to embed video into email, you need to keep the following things in mind.  

• Create a video in mp4 format.
• Assess the goal of your video. If you want it to push your customers to check out your website, then create a brief GIF of the video in your email and host the complete video on your website. Likewise, if it’s a welcome email and the video contains the founder’s message, then you can embed the full video into the email.
• Another popular practice while embedding video into email is to use a static image with a play button over it. 
• In some cases, you’ll find brands using a combination of both static images and GIFs. This is usually implemented by including an animated play button over a static image.

The last two points can also be viewed as fallback options in the event your email client fails to support video embedding in the email.

GIF, in this case, is very important. It is  in those email clients with limited support for Video HTML 5 tag. Without the fallback GIF, a black screen shall appear without an anchor tag and thus subscribers will feel annoyed about what to do with it.

Video HTML5 Tag To Create A Video

<video autoplay="autoplay" loop="loop" clipID = "em_4566" poster="Link for GIF" 
controls="controls" src="Link for the source of video (mp4 format)" 
style="mso-hide: all;display:block;width: 100%;height: auto;max-height: none;">
</video>

Trying to embed video in Outlook email can be pretty challenging, hence a fallback is necessary.

<!--[if !mso]><!-->
<a href="Link to the video (treated for click through in outlook)" target="_blank"
alt="Redirect" style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"><img src=" Here will be the GIF" border="0" alt=" " 
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>
<!--<![endif]-->

So the final code shall now be

<video autoplay="autoplay" loop="loop" clipID = "em_4566" poster="Link for GIF" 
controls="controls" src="Link for the source of video (mp4 format)" 
style="mso-hide: all;display:block;width: 100%;height: auto;max-height: none;">
</video>
<!--[if !mso]><!-->
<a href="Link to the video (treated for click through in outlook)" target="_blank"
alt="Redirect" style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"><img src=" Here will be the GIF" border="0" alt=" " 
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>
<!--<![endif]-->

For the non-supportive email clients we apply a DIV on top of it for hiding

<div class="vid_em_4566" style="mso-hide: all;width: 0px;max-height: 0px;
height: 0px;overflow: hidden;text-align: center;">
<video>
<video autoplay="autoplay" loop="loop" clipID = "em_4566" poster="Link for GIF" 
controls="controls" src="Link for the source of video (mp4 format)" 
style="mso-hide: all;display:block;width: 100%;height: auto;max-height: none;">
</video>
<!--[if !mso]><!-->
<a href="Link to the video (treated for click through in outlook)" target="_blank"
alt="Redirect" style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"><img src=" Here will be the GIF" border="0" alt=" " 
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>
<!--<![endif]-->
</video>
</div>

We have hidden the video for non-supporting email clients and provided a fallback for outlook but it would still need to be provided with a fallback for those email clients which do not support video play but still call for image or black screen like in iPhone or Samsung Native app.

For that you can apply div on top of the video tag with image and anchor to a video having an inline display block while hiding using media queries.

<div class="image_em_4566" style="width: inherit;text-align: center;"> 
<a href="Link to the video (treated for click through in non supportive non outlook)"
target="_blank" style="display:block;width: inherit;height: inherit;
max-height: inherit;"><img src="Here will be the GIF" alt=" " style="display:block;
width: inherit;height: inherit;max-height: inherit;border:0"> </a>
</div>

On media queries, apply a property which inherits width and height for those elements in Apple mail, Thunderbird that would support media queries and Video too, and also keep everything 0 or hidden for image while rest would be calling image from inline.

@media (min-device-width:600px) { 
[class=vid_em_4566] 
{width:inherit!important;height:inherit!important;max-height:inherit!important} 
[class=image_em_4566]
{width:0!important;height:0 !important;padding:0!important;overflow:hidden;} 
}

Don’t forget to apply enclosing div to cover up the width and height of entire structure under the Table/Td so the entire code would appear, something as below:

.dimensions_em_4566 {width: 600px;height: 338px; max-width:600px; max-height:338px;}
@media (min-device-width:600px) { 
[class=vid_em_4566] 
{width:inherit!important;height:inherit!important;max-height:inherit!important} 
[class=image_em_4566]
{width:0!important;height:0 !important;padding:0!important;overflow:hidden;} 
}
@media only screen and (max-width:480px) 
{ .dimensions_em_4566{width: 100%;height: auto; max-width:100%;}
@media only screen and (min-width:481px) and (max-width:599px) 
{ .dimensions_em_4566{width: 100%;height: auto; max-width:100%;} 
<div class="dimensions_em_4566" style="overflow: hidden"> 
<div class="image_em_4566" style="width: inherit;text-align: center;"> 
<a href="Anchor tag to hosted Video link for fallback" target="_blank" 
style="display:block;width: inherit;height: inherit;max-height: inherit;">
<img src="GIF fallback image of Video" alt=" " style="display:block;
width: inherit;height: inherit;max-height: inherit;border:0">
</a> 
</div> 
<div class="vid_em_4566" style="mso-hide: all;width: 0px;max-height: 0px;
height: 0px;overflow: hidden;text-align: center;"> 
<video autoplay="autoplay" loop="loop" clipID = "em_4566" poster="Fallback GIF image" 
controls="controls" src="Link of hosted video in mp4 format" style="mso-hide: all;
display:block;width: 100%;height: auto;max-height: none;"> 
<!--[if !mso]><!-->
<a href="Anchor tag to hosted Video link for fallback" target="_blank" alt="Redirect" 
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;">
<img src="GIF fallback image of Video" border="0" alt=" " style="mso-hide: all;
display:block;width: inherit;height: inherit;max-height: inherit;"/>
</a>
<!--<![endif]--> 
</video> 
</div> 
</div>

How Shall Videos ‘Play’ Well In Your Next Email Campaign?

Bridge the information gap – Videos draw the attention of viewers as soon as they open the email as compared to plain text.

Time Saving – Video can be used to pass the information on a product or service in less time and makes clear the complexity of your message.

Virality – When an online video becomes popular, it draws more attention. It can lead to more sharing on social media and increase brand visibility.

Response – Study shows that using the word “video” in an email subject line boosts open rates by 19%, click-through rates by 65%, and reduces unsubscribes by 26%.

Wrapping Up

Like a phoenix resurging from the ashes, support for embed video in emails has gained back the love. With the existing support by the email clients, it can be said for sure that more and more email marketers shall jump the bandwagon.