How to Add Video to an Email Template

How to Add Video to an Email Template


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. 

tinyEmail email add video block


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.

tinyEmail email add video url


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. 

tinyEmail email add video html


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>.

tinyEmail email add video code


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. 

tinyEmail email copy code

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. 


    • Related Articles

    • How to Add a Table to an Email Template

      How to Add a Table to an Email Template Display structured content What's the best way to present structured content in a template? Let's say, for instance, you're promoting a product or service and want to place a three-column price list in an email ...
    • Video Tutorial | How To Pick Email Templates

      Video Tutorial | How To Pick Email Templates How to find and choose templates for your campaign. How to easily sort through, search and filter to find the perfect email template for your marketing campaigns in tinyEmail. Let's get started! Have ...
    • Customize the general settings of your email template.

      Customize the general settings of your email template. Say hello to the world's most powerful and intuitive email editor. Here's how to create stunning emails on tinyEmail Do not throw away the manual! We at tinyEmail are a big believer in ...
    • Create a New Email Template

      Create a New Email Template Build beautiful templates in 3 minutes Fun fact about time allocation. Before tinyEmail, we were spending about 75% of our email marketing time playing around with email design tools and 25% of the time crafting meaningful ...
    • Save Campaign Template Design Changes

      Save Campaign Template Design Changes Understanding our streamlined workflow We spend a lot of time rethinking the user experience. How can we help the user (qua you) get from A to B with the fewest jumps, hurdles, and interruptions? Along that ...