How do I add a video to my campaign?

Unfortunately, many email clients will not show embedded videos. At most, they show a static image. This is also true for animated gifs, flash animations and HTML 5 playback.

For email clients that do support video playback

Such as clients on iOS and Android devices, you can use mp4, webm or ogv file types:

<video width=”600″ poster=”fallbackimage.png” controls autoplay>
<source src=”http://mydomain.com/myvideo.mp4″ type=”video/mp4″ />
<source src=”http://mydomain.com/myvideo.webm” type=”video/webm” />
<source src=”http://mydomain.com/myvideo.ogv” type=”video/ogg” />

If you don’t have access to any of these formats, only have your video on YouTube or believe that you’re better off safe than sorry, you should include a static image with a link back to the video.

The fallback link should ideally hosted on your website, Facebook page or personal YouTube Channel. This way, if neither an Android nor an iOS device is being used, an image will appear instead:

<!– Fallback if HTML5 video is not supported –>
<a href=”http://mydomain.com”><img border=”0″ src=”fallbackimage.png” label=”Fallback Image” width=”600″></a>

So the full code looks like this:

<video width=”600″ poster=”fallbackimage.png” controls autoplay>
<source src=”http://mydomain.com/myvideo.mp4″ type=”video/mp4″ />
<source src=”http://mydomain.com/myvideo.webm” type=”video/webm” />
<source src=”http://mydomain.com/myvideo.ogv” type=”video/ogg” />

<!– Fallback if HTML5 video is not supported –>
<a href=”http://mydomain.com”><img border=”0″ src=”fallbackimage.png” label=”Fallback Image” width=”600″></a>
</video>

Visit http://www.w3schools.com/html/html5_video.asp for more information about HTML 5 videos.

Grabbing screenshots:

Go to the URL of the video and pause at a point that you like. Then, take a screenshot to capture the image:

Windows Users

  • Go into your Accessories
    • Choose the “Snipping Tool” (Only available from Windows Vista onwards)
    • Choose a ‘Rectangular’ snip from the drop down.
  • Point, click and drag around the image that you want to capture
    • Save as .jpg or .PNG

Mac Users

  • ⌘+ Shift + 4
  • Point, click and drag around the image that you want to capture

Important:

  • It’s best to use videos produced by your company, or videos where you own the rights
  • Keep in mind that if you are referencing someone else’s video, there might be device or geographic limitations in its diffusion. You should also give credit where credit is due.