Video in email

Boost Email Open Rates With Video

Ashlea Owings Blog, Content and Creative

It has been reported that emails with “Video” in the subject line get 20% more opens. It’s easy to assume many people would prefer to watch a video to get information rather than read. One survey reported that video increased click-throughs by 96%.

That said, we all know that embedding video in email has big deliverability problems, if deliverable at all. Alas, with a little slight of hand, you can give the impression of video in email, while linking out to it. Both satisfying your subscriber and getting around the technical and delivery road blocks. A win-win. Here’s how it’s done:

How To Present Video In Your Emails
1. Use an image of the video
What you’ll do is take a screen shot of the your video, turning that into an image. The image will link to the actual video.

Taking a Screenshot of your Video (Turning part of your screen into a picture)

(A) Select Video Still Frame
Open your video and pause it on the desired frame you wish to use as your video image.

(B) How to take a screen shot
A screenshot is an image grab of whatever is on your screen at that moment you press the required keys on your keyboard, thus taking a picture of your screen.

Windows: Press the “Print Screen” button.
Apple/Mac: Simultaneously hold the “Command(apple)” and “Shift” keys and press the number “3” key. By default, the picture file will save to your desktop.

For even more precision, simultaneously hold the “Command(apple)” and “Shift” keys and press the number “4” key. This combination turns your cursor into a “crosshairs” icon allows you to to make a precise selection of the specific area you want to capture. This is my preferred method. To do this, press and hold your mouse button down, while placing the “crosshairs” cursor over the topmost left corner of the area you want to select. While still holding the mouse button down, drag to the lowermost right corner selecting your desired area. It will create a gray shadow over the selected area. When you have the selection made, release the mouse button. If you didn’t quite select the area you wanted, simply press the “escape [esc]” key to release the selection without capturing the image and try again.

2. Open the Screen Shot, Resize, Save in Web Format
Windows will often capture the screen and save it as a .BMP format, while Mac/Apple will create a .PCT or .PNG file. We need web-friendly formats, and while .PNG is a web friendly format, specifically we need email friendly formats such as .JPG or .GIF.

Dimensions Considerations
The typical width of email for most email reader apps, is no more than 600 pixels wide for large screens, while 320 pixels wide is the limit for mobile. Another factor is the width of your email template. The image cannot exceed the width of the content area of your email template, and this will vary in all cases. That said, if you are grabbing your video image directly from a screen shot of a YouTube page (for example): the default video player dimensions on a YouTube page is 640 pixels wide by 390 pixels high. You will probably need to reduce this to 580 pixels wide as the maximum amount you would display it, but probably even smaller. If you are trying to make a mobile friendly email, 300 pixels would be the maximum width you would want to use.

(A) Determining image dimensions for your video screenshot
An easy trick if you’ve had images in your template before that work fine, find one of those. Then simply right-click the image and select “view image” and it will display in your web browser. Your web browser will display the image dimensions. Voila! You know what size to make your video image. Write it down.

(B) Editing Your image
Using your image editor of choice, (i.e, Photoshop etc), you are going to crop the image to display the desired part of the image from the screen shot. You can do one of two things: (i) Crop the image to show the video player and its controls, so that it looks the way the embedded video from YouTube normally appears, or (ii) Crop the image area only without the controls. Personally, I like to show the controls with the image to give the true impression of an actual video player embed. Like this example:

Click to View Video

(C) Resizing and Saving Your image
Once you have cropped the image to the desired appearance, you next need to adjust the width and height. You want to keep the resize proportional, therefore set it by width and let height reset in proportion. We will also export this image as a jpg, and in Photoshop’s save for web command, we can do the resize and export to jpg at the same time. For example, let’s say your email template is 600 pixels wide, designed for desktop and not mobile. But let’s say yoou want to optimize your video image to mobile nonetheless. You are going to resize the image from 640×390 pixels to 300×183 pixels. As said, Photoshop and most other image editing apps can do the proportional figuring out for you. Enter the width of 300 pixels and it should do the rest. Save as .JPG, optimized, and set the quality to either medium (30) or high (60). Lower (medium/30) is better for smaller file size considerations if your image does not suffer too much quality loss.

3. Upload Your Image
As you normally would do, you will upload and insert your image into your email.

4. Link The Image To The Video
Next you would assign a link to the video image, that links out to the actual video, either to a page on your web site or on YouTube (or wherever your video resides on the web). I would recommend that you create a page for the video on your web site and that you embed the actual video on your site. This is a no-brainer. Why not direct them to your site where you can pitch them a sale or direct them to other information? YouTube is great for hosting videos, but you should always have those videos embedded on your site for keep your audiences getting your content on your web site, not YouTube’s. The embed code is already available for you (or anyone) to grab on your video’s YouTube page. Be sure you have “allow embedding” selected in your YouTube video manager.

5. Caveat: Alt Text For Images / Anchor Text for Links
The reality is, no matter how much you desire and make efforts to place images in your emails; many email client apps, by default, do not load and display images in html email. This is often the case with gmail, hotmail, and yahoo mail. Therefore, not only with your video image here – but with all images – you need to include alt text in your code that displays when the images does not load or has not loaded yet. For linked images, the link will appear and it needs anchor text for a title. For video, something like “Click To Watch Video” will explain what the link is very clearly.

6. Test
When your page has been coded and completed, Test the email to be sure the alt text and anchor text appear correctly. Check that the video image appears correctly when images are loaded. Finally, check that your link works in redirecting to your video page.

Share this Post

About the Author
Ashlea Owings

Ashlea Owings