In today’s world, people use videos as preferable media to put their views in front of someone in an easy manner. Embedding a video in an email is used to enhance the user experience of email.
But due to spam and security reasons, there are number of email client that doesn’t support video in email, only Apple mail and Outlook.com with (chrome, firefox & internet explorer) supports video in email, they can play the video within the email.
Hence, this way, you can simply embed a video in a customized email template or an email template generated by an email builder.

Benefits of Embedding Video in Emails Based On Studies And Researches –

  • The word “video” in the subject line of an email increases click through rates by 20%.
  • Increases open rates and click-through rates.
  • 44% users spent more time with the email having videos embedded.
  • Sharing and forwarding increased by 41%.
  • Conversion rates increased by 24% and ROI increased by 20%.
  • Marketers generated 40% higher monthly revenue.

Watch the live demo or download code from the link given below

Download script   

You can use MailGet -email service provider for the entire solution.

Embed A Video In Email –

We can use the <video> tag of HTML5 to send the video in an email. But there are some of email clients which doesn’t support <video> tag.

In this tutorial, you will learn to send video from your email which will be visible in your Apple and Outlook client’s email as both supports video used within the email.

But,

For other email clients, you have to include a fallback image which will be linked to a video. The fallback image is shown to the email client which doesn’t support the video tag in the email.

<video poster="path of the poster image" width="100%" height="50%" controls="controls">
<source src="path of the video" type="video/mp4" />
<a href=" path of the same video uploaded on youtube">
<img src="path of the video image" width="100%" height="50%" alt="image instead of video" />
</a>
</video>

Explanation:

(i) A poster image will get the display in the email client which supports <video> tag with the video controls.

(ii) <source> tag accepts the path of the video.

(iii) Here is the image with the link of the same video uploaded on the youtube. We can also use the video uploaded on the different server, but it will get opened in the different tab which will look awkward.

In the above code we have created a backup image for email clients which doesn’t support video tag. This image is linked with the video uploaded on the youtube.

Some Important Facts –

(i) The link for the youtube video must be the direct link of the video. it should not be the embed URL.

(ii) This youtube link works in the email client that doesn’t support <video > tag such as Gmail, Hotmail.

(iii) For the images we should use the screenshot of video.

(iv) There must be both of the images poster image and  link image, poster image is shown to  the client which support video in email and link image shown to the other email client which doesn’t support video in email.

HTML File –  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this meta tag, Half Life 3 will never be released. -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>send video in emails</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body bgcolor="#">
<!-- BODY -->
<table class="body-wrap" bgcolor="#F8F8F8">
<tr>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<!-- HEADER -->
<table class="head-wrap" bgcolor="FFFFFF">
<tr>
<td class="header container" >
<div class="content">
<table bgcolor="#FFFFFF">
<tr>
<td><img src="https://www.formget.com/mailget/images/logo.png" width="50%" /></td>
<td align="right"><h2 class="collapse">Welcome To MailGet</h2></td>
</tr>
</table>
</div>
</td>
</tr>
</table><!-- /HEADER -->
<!-- code for the video starts from here-->
<table>
<div style="border:1px solid; text-align: center ; margin-left: auto ; margin-right: auto ;">
<video poster="https://www.formget.com/wp-content/uploads/2015/09/video-in-email-image.png" width="100%" height="50%" controls="controls">
<source src="https://www.formget.com/wp-content/uploads/2015/09/MailGet-Explainer-Video.mp4" type="video/mp4" />
<a href="https://www.youtube.com/watch?v=QpeQx8bE598"><img src="https://www.formget.com/wp-content/uploads/2015/09/video-in-email-image.png" width="100%" height="50%" alt="image instead of video" /></a>
</video>
</div>
</table>
<!-- code for the video end here-->
<table>
<tr>
<td>
<p class="lead">Hi...., Friends the above video will get played when we click on it
this video will open with different styles in different device
video will directly get played in apple mail and outlook , but in some other divices it will popup up a window in which video will play</p>
<!-- Callout Panel -->
<div id="rt" style=" margin-bottom: 110px"></div>
<hr>
<p class="callout">
For frequent solution over the problem related to mails
just check our service <a href="https://www.formget.com/mailget">MailGet</a>
</p><!-- /Callout Panel -->
<hr>
<!-- social & contact -->
<table class="social" width="100%">
<tr>
<td>
<a href="www.Formget.com/mailget.com">For MailGet click kere </a>
</td>
</tr>
</table><!-- /social & contact -->
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table><!-- /BODY -->
</div>
</body>
</html>

CSS File: style.css

* {
margin:0;
padding:0;
}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}

p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;
max-width: 700px;
margin:auto auto;}

.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
.container {
display:block!important;
max-width:700px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
.content {
padding:15px;
max-width:700px;
margin:0 auto;
display:block;
}
.content table { width: 100%; }

NOTE: We have also included a zip file of complete code just download it and use it.

Conclusion

I hope that you have enjoyed this article ,and you must be feeling yourself comfortable in sending a video within an email. Please comment for any query. Keep visiting our website.

For more related information check out the following blogs –

Related Posts:

Send Email via PHPMailer and Mandrill's SMTP
Export Contacts From SendGrid's Marketing Email API
Find Email Domain Exists Or Not