How to include video in email newsletters

In this tutorial we want to show you how to directly include a video in your email HTML, so it can play back directly within the email client. You can download our template HTML for free, so you can use it or adapt it to your needs. It’s a coffee based theme, but you can change it to anything you like.

Download mailerbob’s video email

Normally you would include video in email by simply adding an image, usually a screenshot of the video and linking it to a video which is hosted on a platform like YouTube. To see the video your users will need to click on it and follow the link.

With the the right HTML you can include the video in your email newsletter, so it plays back right within the email client. This works on many clients, but not all. It works on Mac’s email client, as well as on the iPhone or the standard Android email application.

Video in email

Since video in email still doesn’t work everywhere we use a fall-back image which is shown in case the video cannot be displayed, so your email looks neat either way.

Let’s take a look at the HTML snippet that makes video in email work:

<!-- Video part -->                    
    <video style="display: block;" width="100%" poster="images/videoimage.jpg" controls="controls" src="images/vid.mp4">
    <a href="images/vid.mp4" style="color:#FFC20E;"><img src="images/videoimage.jpg" 
    width="100%" border="0" alt="Video in Email from mailerbob" style="display: block;" /></a>
<!--Video part end -->

You can see this is pretty similar to normal HTML used in emails. What is unusual is the <video> tag.
It defines the fall-back image in poster="images/videoimage2.jpg" and the source of the video file in src="images/vid.mp4"

The part where it says controls="controls" enables the play back button, so it’s important to include this. You can also add an auto play, by using controls autplay instead of controls="controls".

When uploading your video file, make sure it is in .mp4 format and nicely compressed, so the file doesn’t take too long to load. The file we used in this example was 3.0 MB for 30 seconds of video.

Also note that when sending the email you would have to use absolute paths for the links to work, so src="images/vid.mp4" would become src="".

And that’s it. Feel free to play around with the HTML of our template. It’s free. Hit up @mailer_bob on Twitter if you have any questions or comments.