Important! This tutorial is related only to Postcards 2. The new Postcards comes with an “Insert HTML” feature, and the new Video module will be available soon. 🤫
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:
Make sure you have a UI element with a “Text” field because that’s where we’ll be adding the code.
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:
That will open a text editor where you can add HTML code like this:
Replace the contents there with your video code. My code looks like this:
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:
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:
After you press save, your video should now look bigger like this:
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
- How to create a template in Postcards.
- How to edit code in the Postcards app.
- How to add HTML code to your text element to embed videos in your email template.