How to Add Video to an Email Template

Increase reader engament

There are so many reasons to inject video into your email marketing campaign. 

Tell a story. Show your brand. Demonstrate social proof. Get clicks. Yes, research suggests that email campaigns with short videos tend to have higher open rates, lower opt-out rates, and higher CTA clicks.

Adding video content to a tinyEmail template is quick and easy. This article shows you how.

Video options

You can't actually upload a video to our server. The next best solution is to drop a link into the template. The other option (with limitations) is to embed a video (see below) into the template. When users click Play, they watch the video without leaving your email message.

I describe each option below.

Inserting a link

This is the most reliable way to deliver video content. It works on all email clients and devices. 

Open a template and go to the side panel. Place a 1-column structure on the canvas. Drag the Video block to the structure. 

Pasting a link

Left-click the Video block one time to open the Settings panel. Go to the panel and paste in the video URL. 

• Link to video content on YouTube, Vimeo, or VK. 

tinyEmail auto-fills the Alternate text field and creates a thumbnail with a faux play button.

Customize the display

On the side panel, change the design and appearance of the faux Play button. Select None to remove the button.

To replace the default thumbnail with a different image, switch on the Custom thumbnail toggle. Upload an image (JPG or PNG). Open the Image editor to customize the picture (e.g. resize, color, crop, etc.). 

That's it!

Embedding video

Embedding is another option. Some, but not all, email clients will play video content in an email message. Our research suggests the following email clients support HTML5 (which is needed to play a video): 

• Apple Mail (Mac and iOS)
• Superhuman
• Outlook on Mac
• iOS Mail
• Samsung Mail
• Thunderbird

These email platforms do not support videos embedded in emails:

• Gmail
• Outlook (everywhere except Mac)
• Android
• AOL Mail
• Lotus Notes
• Yahoo! Mail

Here's a workaround that might work with some email clients. If the embedded video doesn't play, there's a built-in backup. Complete these steps in order:  

1. Add code to your email template.
2. Paste links into the code.

Adding code

Open a template, go to the side panel, and place a 1-column structure on the canvas. Drag the HTML block to the structure. 

Pasting code

Left-click the HTML block one time. A dark window displays. Copy the code below and paste it into the window between the <p> and </p>.

Copy this code:

<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" width="100%" height="313">                                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">                                <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">                        <!-- fallback -->                        <a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>                       </video>

Customizing the code

The screenshot below shows the same code with two parts. 

Part 1 embeds the video inside the message. The first link is for a custom thumbnail. The next two links are for the video (mp4 and Webm formats). 

• In Part 1, you can only link to video content on an external hosting site or your website. Links to YouTube or Vimeo won'twork here. 

Part 2 is a backup. If the embed tool (Part 1) does not work on the email client, the message displays a custom thumbnail and a link to a different video. You can add links to YouTube or Vimeo here.

Customization notes

• Upload a custom image (for thumbnails) to any site (e.g. Pinterest). This will be the thumbnail for readers on Apple devices. The MP4 video generates a thumbnail, but this image won't render on iPhone X and devices with Retina displays. The play button automatically appears on the thumbnail. Paste the image link after the "Poster" attribute.
• If required, convert your video to MP4 format (with an app like Handbrake). In the code, replace the link after the "source src" attribute with your video URL.
• Convert your MP4 video to the WebM format. Paste that link in the respective code line. This is an optional step in case the client won't play MP4 files.
• Upload a second image. You could draw a play button on it to let readers know a link is available (or take a screenshot of your video on YouTube). This image is displayed by email clients that do not support interactivity in emails.
• Upload your video to YouTube (or another host site). Paste the URL in the "href" attribute after the quotation marks. Once a reader clicks or taps the thumbnail (or faux play button), a new tab opens and plays the video.