1. Home
  2. Postcards
  3. Online Editor
  4. How to Embed Video into a Postcards Email Template

How to Embed Video into a Postcards Email Template

In this tutorial, we’ll be adding code to a Postcards email template to add video in the email.

Some email clients don’t allow video playback in their emails and they will instead display a fallback image.

Prerequisites

  • A Designmodo account
  • A link to your video and image you want to use

Video Version

Steps

1. Create a template in Postcards

In the Postcards app, create a template. Mine looks like this:

How to Embed Video into a Postcards Email Template

Make sure you have a UI element with a “Text” field because that’s where we’ll be adding the code.

Create a template in Postcards

2. Add HTML video code to your template in the app

To open the text editor that allows you to add code to your email template, open the “Text” section and under “Tools” press “Source code” like this:

Add HTML video code to your template in the app

That will open a text editor where you can add HTML code like this:

HTML code

Replace the contents there with your video code. My code looks like this:

Replace the contents

What’s important here is the “src” attributes in video and img elements. “Src” is what the video and image elements point to so in the video, the “src” value is the link to the video and in the image, the “src” value is the link to the image.

For email clients that don’t allow videos to be loaded, the <img> element is what gets shown instead.

If you press save, your email template should now look like this:

Email template

Now you can preview your email template in the browser or by sending yourself a test email to see how this looks.

3. Edit the code to change the size of the video

If you want to change the size of the video it’s very simple.

In the code we just created, at the end of the <video> element are attributes called “width” and “height.”

To increase the size of the video to say 550px in width, simply update the values of the “width” and “height” attributes by the difference between the current value and the value you wish to use.

The width is currently 320px and to change it to 550px is a difference of 230. Increase the value of the width and height by 320. Your code should now look like:

Edit the code to change the size of the video

After you press save, your video should now look bigger like this:

Increase the size of the video

Make sure to also update your <img> tag if you want to change the size of the <img> as well.

And that’s everything there is to add a video in your email template!

What we covered

  1. How to create a template in Postcards.
  2. How to edit code in the Postcards app.
  3. How to add HTML code to your text element to embed videos in your email template.
Updated on February 3, 2020

Was this article helpful?

Related Articles

Leave a Comment