How to embed Video in your HTML Email template using SendGrid

Playable is integrated with SendGrid making it simple, quick and easy to embed Video in your SendGrid email campaigns simply by Copy and Pasting

How to embed video in SendGrid emails when uploading a HTML template

In this tutorial you will learn how to create, embed and send a Video Email with SendGrid and Playable, that plays automatically at the moment of opening the email.

If your preference is to use the SendGrid Template Builder tool to create your email, please follow our tutorial on How to embed video into SendGrid Template within Template Builder.

Playable makes it quick and easy to embed video content within your email campaigns, it’s designed for use by marketers with who want to evolve their email campaigns and enjoy significant shifts in response and engagement.  

If you use SendGrid Template Builder to build your templates view our tutorial on How to embed video in SendGrid Templates here

1. Log into your SendGrid account

Once logged in simply follow the process to commence setting up a new campaign as follows:
Navigate to the “Campaigns” page that sits under the “Marketing Campaign” menu.


Click the “Create Campaign” blue button in the top right corner of the screen.

2. Create a new Campaign within SendGrid

Select the “Custom” tab to enable you to upload your HTML template.

If you are using the SendGrid Template builder please see out guide to adding video with SendGrid Template Builder.

3. Select your editing experience

Select the “Code Editor” option and click Continue.

The Code Editor is designed to enable you to create a template, edit a SendGrid template, or build a campaign with your own custom HTML.

4. Upload your HTML to SendGrid

Copy and paste the code for your HTML template directly into the content area of the code editor.

We have used the HTML code from a familiar SendGrid template for this tutorial. You can also write the HTML for your campaign or template directly in the code editor. 
Preview your campaign or template by clicking Preview. 

By placing your mouse over the element in the template, the HTML editor panel on the left highlights the HTML code relating to that content.

In the example opposite we have placed our mouse over the image of the vehicle to highlight to related HTML. By looking at the highlighted HTML you can also ascertain the width of the image which will be useful later when specifying the width of the Video, in this instance it is 600.

5. Complete your Campaign Set Up.

Click the “Settings” tab on the left of the screen to commence your campaign set up.

Name your Campaign, Select the “From Sender” and enter your email subject line, and pre-header, you may also select a category in which your campaign will reside for reporting and archive purposes.

Create your video content in Playable

Steps 6-16 below outline the process of creating your video content within Playable, which you'll then embed within the email template you have uploaded to your SendGrid campaign.

6. Create your Playable Account

If you are new to Playable you can create a new account. All new accounts are offered the opportunity to test drive the platform with 100 free plays.

You can upgrade your plan or purchase extra plays as needed.

7. Create your Video Snippet

To create your video email click the “Add Video” button at the head of the page.

8. Video Title

Enter a Video Title for the Video you are creating, this will help identify the Video later in Reporting

9. Upload your Video File to Playable

You can upload your Video to Playable by either selecting your video file from your computer, dragging it into the editor screen or entering a URL of where it is hosted be it on YouTube, Vimeo, Wistia, Brightcove or any popular video hosting platform. Playable can handle all the popular video formats including mp4, avi, mov and flv. Once you have selected your video click the “Apply” button to upload your video file.

10. Edit your Video

Your video is now ready for editing. Our editor is designed to enable you to create a 10 second video email from the full-length video you uploaded. It is this 10 seconds that will be published in your video email. In the editor you can crop the video to focus on your key content and select multiple clips to make up the 10 seconds. As you are creating your video the editor will show you the duration of each clip and allow you to preview the edit and re edit until you are happy with your final cut. For a full preview of our editor features visit our Editor Page

To ensure your video fits perfectly into the allocated spot of your email template you can select the width and height that you’d like the final video to be published at using the dimensions of the image you noted from the SendGrid template. Our image was 600 wide, so we changed the width to 600 and the height was automatically changed by the system. Once you have your final cut click “Continue”.

11. Enhance your Video Email

You are now ready to add any enhancements to your video email including captions, a watermark, end card or footer. Simply select the enhancements you wish to add and follow the onscreen prompts to add your chosen enhancements.

You can also add a link to where any clickers on the video should be re directed, this will generally be the page where the hull video is hosted. You now have completed creating your video snippet so click the “Compile” button.

Playable now compiles this video creating over a hundred versions which will be used to ensure each recipient receives the video file most suitable for their device, bandwidth and connection.

12. Video Email has been created

Your video email has been successfully compiled so now it’s time to start thinking about placing this video within your email template. The first step in this process is to Select SendGrid as the email platform that you are using to send your campaign from the drop down options. Once you have selected SendGrid a second drop down will appears which is labeled “Select Campaign”. You should ignore this as this is only used when you are importing your Playable video snippet into SendGrids Template Builder.

13. Copy the HTML snippet

To embed your video into your SendGrid Template you will need to paste the Playable HTML into the SendGrid templates HTML.

To do this Click the “Copy to clipboard” button in the top right hand corner of the pane where the HTML code is shown.

 

14. Paste the Playable HTML into your SendGrid Editor

Locate where you wish the Video to appear within your HTML template.

By placing your cursor over any existing images in the template this will highlight the HTML corresponding to this in the HTML editor in the left column.

15. Paste the Playable HTML where you wish the Video to embed within your Template

Having identified the position in the template you wish to embed the Playable Video clip, delete any HTML which corresponds to any image you are replacing and then paste the Playable HTML in the section where you deleted the image tag.

16. Add Recipients and Test your Video Email prior to sending to your list.

Click the Settings tab on the left had side of the screen to complete the set up of your SendGrid Campaign.

Add your recipient list to the campaign and your test email addresses, proceed to test your mailing.  

Once you have purchased your Plays you’ll be ready to send either immediately or by scheduling using the SendGrid scheduling feature.