How to embed Video in your HTML Email template using SendGridPlayable 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.
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 PlayableSteps 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 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.